// Example: dense data atoms composed inside a detail-panel section.
import { Link2, Tag, Zap } from "lucide-react"

import {
  DataListRow,
  EmptyState,
  MetaBox,
  SectionLabel,
  TagList,
} from "@/components/widgets/data-primitives/DataPrimitives"
import { StatusBadge } from "@/components/widgets/status-badge/StatusBadge"

export default function Example() {
  return (
    <div className="flex max-w-md flex-col gap-4">
      <div>
        <SectionLabel icon={<Zap className="h-3 w-3" />}>
          Contributing metrics
        </SectionLabel>
        <div className="mt-2">
          <TagList
            items={[
              "coverage_rate",
              "latency_p95",
              "error_rate",
              "queue_depth",
            ]}
            max={3}
          />
        </div>
      </div>

      <div className="grid grid-cols-3 gap-2">
        <MetaBox label="Age" value="3d 1h" />
        <MetaBox label="Routed" value="+37s" />
        <MetaBox label="Signals" value="16" />
      </div>

      <div>
        <SectionLabel icon={<Link2 className="h-3 w-3" />}>
          Related
        </SectionLabel>
        <ul className="mt-2 flex flex-col gap-1.5">
          <DataListRow
            leading={<StatusBadge severity="high" appearance="chip" />}
            eyebrow="6E7F3696"
            primary="Coverage collapse across tenants"
            badges={[{ label: "EXPIRED" }]}
            meta="2d ago"
            onSelect={() => {}}
          />
        </ul>
      </div>

      <div>
        <SectionLabel icon={<Tag className="h-3 w-3" />}>
          Transfers
        </SectionLabel>
        <div className="mt-2">
          <EmptyState
            icon={<Tag className="h-5 w-5" />}
            label="No transfers recorded."
          />
        </div>
      </div>
    </div>
  )
}