Session keys

import {
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@paxeer/core";

export interface SessionKey {
  id: string;
  label: string;
  expires: string;
  status: "active" | "revoked";
}

export function SessionKeys({
  keys = [
    { id: "sk_live_1842", label: "helix-exec session", expires: "12h", status: "active" },
    { id: "sk_read_9910", label: "atlas-research read", expires: "2d", status: "active" },
    { id: "sk_old_0021", label: "rotated key", expires: "expired", status: "revoked" },
  ],
}: {
  keys?: SessionKey[];
}) {
  return (
    <Card className="gap-0 py-0 overflow-hidden" data-slot="session-keys">
      <CardHeader className="border-b border-outline-variant px-3 py-2">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Session keys
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Key</TableHead>
              <TableHead>Label</TableHead>
              <TableHead>Expires</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {keys.map((key) => (
              <TableRow key={key.id}>
                <TableCell className="font-[family-name:var(--md-ref-typeface-mono)]">
                  {key.id}
                </TableCell>
                <TableCell>{key.label}</TableCell>
                <TableCell>{key.expires}</TableCell>
                <TableCell>
                  <Badge variant={key.status === "active" ? "default" : "outline"}>
                    {key.status}
                  </Badge>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}