import { Badge } from "@/registry/ui/badge"
import { Card } from "@/registry/ui/card"
import { Progress } from "@/registry/ui/progress"

const metrics = [
  {
    label: "Requests",
    value: "4.1B",
    change: "+12.4%",
    direction: "up",
    note: "vs. 3.6B last month",
    usage: 68,
  },
  {
    label: "Error rate",
    value: "0.02%",
    change: "−0.01pt",
    direction: "up",
    note: "1.1M errors of 4.1B",
    usage: 4,
  },
  {
    label: "p95 latency",
    value: "61ms",
    change: "+3ms",
    direction: "down",
    note: "budget is 120ms",
    usage: 51,
  },
  {
    label: "Storage",
    value: "812GB",
    change: "+41GB",
    direction: "down",
    note: "of the 1TB included",
    usage: 81,
  },
]

export default function StatsCards() {
  return (
    <section className="px-6 py-16">
      <div className="mx-auto max-w-5xl">
        <div className="flex flex-wrap items-end justify-between gap-3">
          <h2 className="text-2xl font-semibold tracking-tight">This month</h2>
          <p className="font-mono text-xs text-muted">updated 4 minutes ago</p>
        </div>

        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {metrics.map((metric) => (
            <Card key={metric.label} className="p-5">
              <div className="flex items-center justify-between gap-2">
                <span className="text-sm text-muted">{metric.label}</span>
                <Badge
                  size="sm"
                  variant={metric.direction === "up" ? "success" : "warning"}
                >
                  {metric.change}
                </Badge>
              </div>

              <p className="mt-2 text-2xl font-semibold">{metric.value}</p>

              <Progress
                value={metric.usage}
                size="sm"
                label={metric.label}
                className="mt-4"
              />
              <p className="mt-2 text-xs text-muted">{metric.note}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}