// Example: a ranked queue item mapped from arbitrary domain data.
import { ArrowUpRight, Clock, Layers, Route, Zap } from "lucide-react"

import { RankedListCard } from "@/components/widgets/ranked-list-card/RankedListCard"
import { StatusBadge } from "@/components/widgets/status-badge/StatusBadge"

export default function Example() {
  return (
    <RankedListCard
      severity="high"
      urgency="urgent"
      ribbon={{
        label: "Escalated",
        icon: <ArrowUpRight className="h-2.5 w-2.5" />,
      }}
      rank={{ value: "#2", progress: 62, progressColorClass: "text-primary" }}
      badges={
        <>
          <StatusBadge severity="high" appearance="chip" />
          <StatusBadge appearance="chip">IN PROGRESS</StatusBadge>
          <span className="flex items-center gap-1 font-mono text-[10px] text-muted-foreground">
            <Layers className="h-2.5 w-2.5" /> 16 signals
          </span>
        </>
      }
      title="Coverage collapse across multiple tenants"
      meta={
        <>
          <span>interoperability</span>
          <span className="text-muted-foreground/30">·</span>
          <code className="text-[10.5px]">coverage_rate</code>
        </>
      }
      pills={[
        { label: "Signal", icon: <Zap className="h-2.5 w-2.5" /> },
        { label: "Hyp +1h" },
        {
          label: "Routed +37s",
          icon: <Route className="h-2.5 w-2.5" />,
          emphasized: true,
        },
      ]}
      trailing={[
        {
          label: "Act by",
          value: (
            <span className="inline-flex items-center gap-1 font-mono font-semibold text-warning-500">
              <Clock className="h-3 w-3" /> 3h 12m
            </span>
          ),
        },
        { label: "Routed to", value: "Ops reviewer", detail: "admin" },
      ]}
      trailingFooter="score 0.746"
      onOpen={() => {}}
    />
  )
}