Stat

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Stat,
  Badge
} from "@pimolu/react";

function RevenueIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.8}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
    </svg>
  );
}

function UsersIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.8}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>
  );
}

export function DemoExample() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Billing snapshot</CardTitle>
        <CardDescription>The current subscription at a glance.</CardDescription>
      </CardHeader>
      <CardContent>
        <div
          className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
        >
          <Stat
            label="Seats"
            value="12 of 20"
            delta="+3"
            trend="up"
            description="Invite up to eight more teammates"
            icon={<UsersIcon />}
            size="sm"
          />
          <Stat
            label="Renewal"
            value="19 Oct 2026"
            description={<span
              className="flex flex-wrap items-center gap-3 min-w-0"
            >
              Auto-renew is on
              <Badge variant="success">active</Badge>
            </span>}
            icon={<RevenueIcon />}
            size="sm"
          />
        </div>
      </CardContent>
    </Card>
  );
}