import { cn } from "../cn";

interface StatusBadgeProps {
  type: "light" | "medium" | "hard";
}

export function StatusBadge({ type }: StatusBadgeProps) {
  const variants = {
    light: {
      container: "border-[#A3DEC6] bg-[#E2F8EF]",
      text: "text-[#0D6F39]",
      label: "Light",
    },
    medium: {
      container: "border-[#FEE2BB] bg-[#FCF3E7]",
      text: "text-[#79470B]",
      label: "Medium",
    },
    hard: {
      container: "border-[#F7D2DF] bg-[#FCEDF2]",
      text: "text-[#8B0E3A]",
      label: "Hard",
    },
  };

  const variant = variants[type];

  return (
    <div
      className={cn(
        "inline-flex items-center justify-center gap-1.5 px-1.5 py-0 rounded-md border h-[18px]",
        variant.container
      )}
    >
      <span className={cn("text-xs font-semibold leading-[18px]", variant.text)}>
        {variant.label}
      </span>
    </div>
  );
}
