"use client";

import { cn, FUEL_COLOR_MAP } from "@/lib/utils";
import { parseCarField } from "@/lib/carFieldUtils";

type FieldKind = "fuel" | "transmission" | "body";

const STYLE: Record<FieldKind, string> = {
  fuel:         "",
  transmission: "bg-purple-50 text-purple-700 border-purple-200",
  body:         "bg-blue-50 text-blue-700 border-blue-200",
};

interface Props {
  value: string | string[] | null | undefined;
  kind: FieldKind;
  className?: string;
  size?: "sm" | "md";
}

export default function CarFieldBadges({
  value,
  kind,
  className,
  size = "md",
}: Props) {
  const options = parseCarField(value);
  if (!options.length) return null;

  const sizeCls = size === "sm"
    ? "px-2 py-0.5 rounded-lg text-[10px]"
    : "px-3 py-1.5 rounded-xl text-xs";

  return (
    <span className={cn("inline-flex flex-wrap gap-1.5", className)}>
      {options.map((opt) => (
        <span
          key={opt}
          className={cn(
            "font-bold border",
            sizeCls,
            kind === "fuel"
              ? (FUEL_COLOR_MAP[opt] ?? "bg-gray-50 text-gray-600 border-gray-200")
              : STYLE[kind],
          )}
        >
          {opt}
        </span>
      ))}
    </span>
  );
}