import { cn } from "@/lib/utils";

/**
 * PipelineAlerts — WealthX DS
 *
 * Compact card showing opportunity counts broken down by priority level
 * (High / Medium / Low). Displayed alongside the PipelineChart in the
 * Loan CRM page header section.
 *
 * Data source: derived from pipeline board columns by counting opportunity
 * priorities across all stages.
 */

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface PipelineAlertCounts {
  high: number;
  medium: number;
  low: number;
}

export interface PipelineAlertsProps {
  counts: PipelineAlertCounts;
  className?: string;
}

// ---------------------------------------------------------------------------
// PipelineAlerts
// ---------------------------------------------------------------------------

const PRIORITY_ROWS: Array<{
  key: keyof PipelineAlertCounts;
  label: string;
  dotColor: string;
}> = [
  { key: "high", label: "High", dotColor: "var(--color-destructive)" },
  { key: "medium", label: "Medium", dotColor: "var(--color-warning)" },
  { key: "low", label: "Low", dotColor: "var(--color-success)" },
];

export function PipelineAlerts({ counts, className }: PipelineAlertsProps) {
  return (
    <div
      className={cn(
        "flex flex-col gap-2 border border-border bg-background px-4 py-3",
        className,
      )}
      data-slot="pipeline-alerts"
    >
      <span className="text-sm font-semibold text-foreground">
        Pipeline Alerts
      </span>
      <div className="flex flex-col gap-1.5">
        {PRIORITY_ROWS.map(({ key, label, dotColor }) => (
          <div key={key} className="flex items-center gap-2">
            <span
              className="size-2 shrink-0 rounded-full"
              style={{ backgroundColor: dotColor }}
              aria-hidden="true"
            />
            <span className="flex-1 text-xs text-muted-foreground">
              {label}
            </span>
            <span className="min-w-[1.5rem] text-right text-xs font-medium tabular-nums text-foreground">
              {counts[key]}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}