// Example: a work-queue row mapped from an arbitrary domain record.
// The screen formats every value; the card owns the layout.
import { Route, Zap } from "lucide-react"

import { SignalFeedCard } from "@/components/widgets/signal-feed-card/SignalFeedCard"
import type { SignalFeedItem } from "@/components/widgets/signal-feed-card/SignalFeedCard.types"

interface QueueRecord {
  id: string
  headline: string
  priority: number
  confidence: number
  severity: "critical" | "high" | "medium" | "low"
  owner: string | null
  team: string
  dueInHours: number
}

function toItem(record: QueueRecord): SignalFeedItem {
  return {
    id: record.id,
    rank: record.priority,
    confidence: record.confidence,
    title: record.headline,
    severity: record.severity,
    status: "IN PROGRESS",
    assignee: { name: record.owner ?? undefined, role: record.team },
    deadline: {
      label:
        record.dueInHours < 0
          ? `Past due by ${Math.abs(record.dueInHours)}h`
          : `${record.dueInHours}h`,
      tone:
        record.dueInHours < 0
          ? "past-due"
          : record.dueInHours < 4
            ? "urgent"
            : "normal",
    },
    stages: [
      {
        id: "detected",
        label: "Detected",
        icon: <Zap className="h-2.5 w-2.5" />,
      },
      {
        id: "routed",
        label: "Routed",
        value: "+2m",
        icon: <Route className="h-2.5 w-2.5" />,
        emphasized: true,
      },
    ],
  }
}

const records: QueueRecord[] = [
  {
    id: "rec-1",
    headline: "Coverage collapse across multiple tenants",
    priority: 1,
    confidence: 62,
    severity: "high",
    owner: "Priya N.",
    team: "Integration",
    dueInHours: 3,
  },
]

export default function Example() {
  return (
    <div className="flex flex-col gap-3">
      {records.map((record) => (
        <SignalFeedCard
          key={record.id}
          item={toItem(record)}
          onOpen={(item) => console.info("open", item.id)}
        />
      ))}
    </div>
  )
}