"use client"

import { Badge } from "@/components/ui/badge"
import { LeadStatus } from "@/types"
import { cn } from "@/lib/utils"

const statusConfig: Record<LeadStatus, { label: string; class: string }> = {
  open: {
    label: "Open",
    class: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
  },
  contacted: {
    label: "Contacted",
    class: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
  },
  pending: {
    label: "Pending",
    class: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
  },
  closed: {
    label: "Closed",
    class: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
  },
  ignored: {
    label: "Ignored",
    class: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
  },
}

interface LeadStatusBadgeProps {
  status: LeadStatus
  className?: string
}

export function LeadStatusBadge({ status, className }: LeadStatusBadgeProps) {
  const config = statusConfig[status]
  return (
    <Badge variant="outline" className={cn(config.class, className)}>
      <span className={cn("mr-1.5 h-1.5 w-1.5 rounded-full", {
        "bg-blue-500": status === "open",
        "bg-amber-500": status === "contacted",
        "bg-purple-500": status === "pending",
        "bg-emerald-500": status === "closed",
        "bg-zinc-500": status === "ignored",
      })} />
      {config.label}
    </Badge>
  )
}