"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-white/40 text-gray-700 dark:text-gray-300 border-gray-300/50 dark:border-gray-600/50",
  },
  contacted: {
    label: "Contacted",
    class: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
  },
  pending: {
    label: "Pending",
    class: "bg-blue-900/10 text-blue-900 dark:text-blue-300 border-blue-900/20",
  },
  closed: {
    label: "Closed",
    class: "bg-blue-400/10 text-blue-600 dark:text-blue-300 border-blue-400/20",
  },
  ignored: {
    label: "Ignored",
    class: "bg-black/10 text-black dark:text-gray-300 border-black/20 dark:border-black/40",
  },
}

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-white border border-gray-300 dark:border-gray-500": status === "open",
        "bg-red-500": status === "contacted",
        "bg-blue-900": status === "pending",
        "bg-blue-400": status === "closed",
        "bg-black": status === "ignored",
      })} />
      {config.label}
    </Badge>
  )
}
