import * as React from "react"
import { Users, MousePointerClick, Eye } from "lucide-react"
import { CounterCard } from "@/registry/ui/counter-card"

export default function CounterCardDemo() {
  return (
    <div className="flex w-full max-w-2xl flex-wrap gap-4">
      <CounterCard
        label="Users"
        value="8,204"
        sublabel="+12% vs last week"
        icon={<Users />}
      />
      <CounterCard
        label="Sessions"
        value="14,930"
        sublabel="3.1 per user"
        icon={<MousePointerClick />}
      />
      <CounterCard
        label="Pageviews"
        value="52,118"
        sublabel="Across 9 pages"
        icon={<Eye />}
      />
    </div>
  )
}