// Example: severity badges plus the standalone helpers in a custom cell.
import {
  severityBorderClass,
  StatusBadge,
} from "@/components/widgets/status-badge/StatusBadge"
import type { Severity } from "@/components/widgets/status-badge/StatusBadge.types"

const incidents: Array<{ id: string; title: string; severity: Severity }> = [
  { id: "INC-31", title: "Queue backlog above threshold", severity: "high" },
  { id: "INC-29", title: "Nightly sync completed late", severity: "medium" },
  { id: "INC-27", title: "New connector online", severity: "info" },
]

export default function Example() {
  return (
    <div className="flex flex-col gap-3">
      {incidents.map((incident) => (
        <div
          key={incident.id}
          // The border helper works anywhere - cards, rows, callouts:
          className={`flex items-center justify-between rounded-lg border border-border border-l-2 bg-card p-3 ${severityBorderClass(incident.severity)}`}
        >
          <div className="flex items-center gap-3">
            <span className="font-mono text-xs text-muted-foreground">
              {incident.id}
            </span>
            <span className="text-sm text-foreground">{incident.title}</span>
          </div>
          <StatusBadge severity={incident.severity} />
        </div>
      ))}
    </div>
  )
}