// Example: KPI strip with severity accents, deltas, and a chip footer.
import { Activity, AlertTriangle, Inbox } from "lucide-react"

import {
  MetricTile,
  MetricTileGroup,
} from "@/components/widgets/metric-tile/MetricTile"
import { StatusBadge } from "@/components/widgets/status-badge/StatusBadge"

export default function Example() {
  return (
    <MetricTileGroup columns={3}>
      <MetricTile
        label="In flight"
        value={128}
        unit="active slots"
        icon={<Inbox />}
        footer={
          <>
            <StatusBadge severity="critical" appearance="chip">
              3 critical
            </StatusBadge>
            <StatusBadge severity="medium" appearance="chip">
              12 med
            </StatusBadge>
          </>
        }
      />
      <MetricTile
        label="Past due"
        value={6}
        icon={<AlertTriangle />}
        severity="critical"
        // For "bad" metrics, up is bad - flip the delta color:
        delta={{ value: "+2", trend: "up", positiveIsGood: false }}
        onClick={() => console.info("filter: past due")}
      />
      <MetricTile
        label="24h throughput"
        value={342}
        unit="resolved"
        icon={<Activity />}
        delta={{ value: "+12%", trend: "up" }}
      />
    </MetricTileGroup>
  )
}