"use client";

export type LeadStatus = "new" | "contacted" | "in_progress" | "not_relevant" | "converted";

interface StatusConfig {
  label: string;
  background: string;
  color: string;
}

export const STATUS_MAP: Record<string, StatusConfig> = {
  new:          { label: "Neu",             background: "#1e3a5f", color: "#93c5fd" },
  contacted:    { label: "Kontaktiert",     background: "#064e3b", color: "#6ee7b7" },
  in_progress:  { label: "In Bearbeitung",  background: "#451a03", color: "#fcd34d" },
  not_relevant: { label: "Nicht relevant",  background: "#1e1e2e", color: "#6b7280" },
  converted:    { label: "Konvertiert",     background: "#2e1065", color: "#d8b4fe" },
};

export const STATUS_OPTIONS = [
  { value: "new",          label: "Neu" },
  { value: "contacted",    label: "Kontaktiert" },
  { value: "in_progress",  label: "In Bearbeitung" },
  { value: "not_relevant", label: "Nicht relevant" },
  { value: "converted",    label: "Konvertiert" },
];

interface StatusBadgeProps {
  status: string;
  onClick?: (e: React.MouseEvent) => void;
}

export function StatusBadge({ status, onClick }: StatusBadgeProps) {
  const cfg = STATUS_MAP[status] ?? STATUS_MAP.new;
  return (
    <span
      onClick={onClick}
      style={{
        display: "inline-flex",
        alignItems: "center",
        padding: "3px 10px",
        borderRadius: 20,
        fontSize: 12,
        fontWeight: 500,
        background: cfg.background,
        color: cfg.color,
        cursor: onClick ? "pointer" : "default",
        userSelect: "none",
        whiteSpace: "nowrap",
      }}
    >
      {cfg.label}
    </span>
  );
}