import { Button } from "@/registry/default/ui/button/radix";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardToolbar,
} from "@/registry/default/ui/card/radix";
import { Progress } from "@/registry/default/ui/progress/radix";

export default function StatisticCard11() {
  const used = 2000;
  const total = 5000;
  const remaining = total - used;
  const percent = (used / total) * 100;
  return (
    <div className="min-h-screen flex items-center justify-center p-6 lg:p-8">
      <Card className="w-full max-w-lg">
        <CardHeader className="border-0 min-h-auto pt-6 pb-4">
          <CardTitle>API Call Quota</CardTitle>
          <CardToolbar>
            <Button variant="outline" size="sm" className="font-medium">
              View API usage
            </Button>
          </CardToolbar>
        </CardHeader>
        <CardContent className="flex flex-col space-y-6">
          <div className="grow space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">
                Used calls:{" "}
                <span className="font-semibold text-foreground">{used}</span>
              </span>
              <span className="text-base font-semibold text-foreground">
                ${(used * 0.002).toFixed(2)}
              </span>
            </div>

            <div>
              <Progress
                value={percent}
                className="bg-muted"
                indicatorClassName="bg-indigo-500"
              />
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm font-semibold text-foreground">
                {remaining} free calls left
              </span>
              <span className="text-xs text-muted-foreground">
                of {total} monthly quota
              </span>
            </div>
          </div>

          <div className="rounded-xl bg-muted/60 px-4 py-2.5 text-xs text-muted-foreground flex items-center justify-between gap-2">
            <span>Quota renews on</span>
            <span className="font-medium text-foreground">
              September 1, 2025
            </span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}