"use client";

import {
  getLeadGrade,
  LEAD_GRADE_COLORS,
  type LeadGrade,
} from "@/lib/types/lead-crm.types";

interface LeadScoreBadgeProps {
  score: number;
  size?: "sm" | "md" | "lg";
  showScore?: boolean;
}

export default function LeadScoreBadge({
  score,
  size = "md",
  showScore = true,
}: LeadScoreBadgeProps) {
  const grade = getLeadGrade(score);
  const colors = LEAD_GRADE_COLORS[grade];
  const sizeClasses = {
    sm: "w-6 h-6 text-xs",
    md: "w-8 h-8 text-sm",
    lg: "w-10 h-10 text-base",
  };

  return (
    <div className="flex items-center gap-1.5">
      <div
        className={`${sizeClasses[size]} rounded-full ${colors.bg} ${colors.text} border ${colors.border} flex items-center justify-center font-bold`}
      >
        {grade}
      </div>
      {showScore && (
        <span className="text-xs text-slate-500 font-medium">{score}</span>
      )}
    </div>
  );
}

export function GradeLabel({
  grade,
  isAr,
}: {
  grade: LeadGrade;
  isAr: boolean;
}) {
  const labels: Record<LeadGrade, { en: string; ar: string }> = {
    A: { en: "Hot Lead", ar: "عميل ساخن" },
    B: { en: "Warm Lead", ar: "عميل دافئ" },
    C: { en: "Neutral", ar: "محايد" },
    D: { en: "Cool Lead", ar: "عميل بارد" },
    F: { en: "Cold Lead", ar: "عميل بارد جداً" },
  };
  const colors = LEAD_GRADE_COLORS[grade];
  return (
    <span
      className={`text-xs font-medium px-2 py-0.5 rounded-full ${colors.bg} ${colors.text}`}
    >
      {isAr ? labels[grade].ar : labels[grade].en}
    </span>
  );
}