Key list

import {
  Badge,
  Button,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  CopyButton,
  Separator,
} from "@cronus-ui/ui";
import { Eye, Plus } from "lucide-react";

interface ApiKey {
  id: string;
  name: string;
  /** Full key value used by the copy action — the UI only ever renders maskedKey. */
  secret: string;
  maskedKey: string;
  scopes: string[];
  created: string;
  lastUsed: string;
}

const apiKeys: ApiKey[] = [
  {
    id: "key-01",
    name: "Production storefront",
    secret: "ck_live_8f31c9a2e6b7d4059a2c4f2a",
    maskedKey: "ck_live_••••••••••••4f2a",
    scopes: ["orders:read", "products:write"],
    created: "Mar 12, 2026",
    lastUsed: "2 minutes ago",
  },
  {
    id: "key-02",
    name: "Zapier integration",
    secret: "ck_live_3d7e91f4b8a2c6501e839c1d",
    maskedKey: "ck_live_••••••••••••9c1d",
    scopes: ["orders:read"],
    created: "Jan 28, 2026",
    lastUsed: "3 hours ago",
  },
  {
    id: "key-03",
    name: "Staging sandbox",
    secret: "ck_test_5a2f8c1d9e4b76032c187b3e",
    maskedKey: "ck_test_••••••••••••7b3e",
    scopes: ["orders:read", "customers:read"],
    created: "Jun 02, 2026",
    lastUsed: "Jun 30, 2026",
  },
];

export function ApiKeysListBlock() {
  return (
    <Card className="mx-auto w-full max-w-2xl gap-0 pb-0 shadow-md">
      <CardHeader>
        <CardTitle className="font-display text-lg">API keys</CardTitle>
        <CardDescription>Programmatic access to your Cronus workspace.</CardDescription>
        <CardAction>
          <Button variant="primary" size="sm">
            <Plus className="size-3.5" aria-hidden="true" />
            Create key
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="px-0 pt-4">
        <ul className="flex flex-col">
          {apiKeys.map((apiKey) => (
            <li
              key={apiKey.id}
              className="flex flex-col gap-3 border-t border-border px-4 py-4 sm:px-6"
            >
              <div className="flex flex-wrap items-center gap-2">
                <span className="font-medium text-fg">{apiKey.name}</span>
                {apiKey.scopes.map((scope) => (
                  <Badge key={scope} variant="secondary" className="font-mono text-xs">
                    {scope}
                  </Badge>
                ))}
                <Button variant="ghost" size="sm" className="ms-auto text-error-strong">
                  Revoke
                </Button>
              </div>
              <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
                <span className="flex items-center gap-1 rounded-lg border border-border bg-surface-inset py-1 pe-1 ps-3">
                  <code className="font-mono text-xs text-fg-secondary">{apiKey.maskedKey}</code>
                  <Button variant="ghost" size="icon-sm">
                    <Eye className="size-3.5" aria-hidden="true" />
                    <span className="sr-only">Reveal {apiKey.name} key</span>
                  </Button>
                  <CopyButton
                    value={apiKey.secret}
                    size="icon-sm"
                    copyLabel={`Copy ${apiKey.name} key`}
                  />
                </span>
                <span className="text-xs text-fg-tertiary">
                  Created {apiKey.created} · Last used {apiKey.lastUsed}
                </span>
              </div>
            </li>
          ))}
        </ul>
      </CardContent>
      <Separator />
      <CardFooter className="justify-between gap-3 py-5">
        <span className="text-xs text-fg-tertiary">3 active keys</span>
        <span className="text-xs text-fg-tertiary">Rotate keys at least every 90 days.</span>
      </CardFooter>
    </Card>
  );
}