import { FlickeringGrid } from "@glinui/ui"


export function Variants() {
  return (
    <div data-glin-theme="dark" className="grid w-full gap-3 sm:grid-cols-3">
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <FlickeringGrid squareSize={4} gridGap={6} maxOpacity={0.4} className="absolute inset-0" />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Square</span>
      </div>
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <FlickeringGrid variant="round" squareSize={4} gridGap={8} maxOpacity={0.4} className="absolute inset-0" />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Round</span>
      </div>
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <FlickeringGrid squareSize={3} gridGap={5} flickerChance={0.6} maxOpacity={0.4} className="absolute inset-0" />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Busy</span>
      </div>
    </div>
  )
}

import { FlickeringGrid, Button, Heading, Text } from "@glinui/ui"


const stats = [
  ["Requests", "2.41M", "+8.2%"],
  ["p95 latency", "184 ms", "-12 ms"],
  ["Error rate", "0.03%", "-0.01%"]
]


export function UsageHeader() {
  return (
    <section data-glin-theme="dark" className="relative isolate flex min-h-[22rem] w-full flex-col justify-end gap-6 overflow-hidden rounded-xl bg-[var(--surface-0)] p-6 sm:p-8">
      <FlickeringGrid squareSize={4} gridGap={6} maxOpacity={0.35} className="absolute inset-0" />
      <div className="relative z-10 flex flex-wrap items-end justify-between gap-4">
        <div className="flex flex-col gap-1">
          <Text variant="eyebrow">Production, last 24 hours</Text>
          <Heading level={2} size="md">API overview</Heading>
        </div>
        <div className="flex gap-2">
          <Button size="sm" variant="outline">Export CSV</Button>
          <Button size="sm">Create alert</Button>
        </div>
      </div>
      <dl className="relative z-10 grid gap-3 sm:grid-cols-3">
        {stats.map(([label, value, delta]) => (
          <div key={label} className="rounded-xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-4">
            <dt className="text-xs text-[var(--color-muted)]">{label}</dt>
            <dd className="mt-1 text-2xl font-semibold tabular-nums text-[var(--color-foreground)]">{value}</dd>
            <dd className="text-xs text-[var(--tone-success-text)]">{delta} vs yesterday</dd>
          </div>
        ))}
      </dl>
    </section>
  )
}