import { Tag } from "lucide-react";
import type { PriceOption } from "@/lib/api/types";
import { PRICE_OPTIONS, isPriceOption } from "@/lib/rfq/priceOption";

/**
 * The Price Option the buyer chose when raising the RFQ (Basic / Ex-Works /
 * F.O.R). Renders nothing for an RFQ raised without one.
 */
export default function PriceOptionBadge({
  value,
  showHint = false,
  className = "",
}: {
  value: PriceOption | string | null | undefined;
  /** Adds what the option means, for screens with room for it. */
  showHint?: boolean;
  className?: string;
}) {
  if (!isPriceOption(value)) return null;
  const option = PRICE_OPTIONS[value];

  return (
    <span className={`inline-flex flex-wrap items-center gap-x-1.5 gap-y-0.5 ${className}`}>
      <span
        title={option.hint}
        className="inline-flex items-center gap-1 rounded-full bg-sky-50 px-2 py-0.5 text-xs font-semibold text-sky-800 ring-1 ring-sky-200"
      >
        <Tag className="h-3 w-3" aria-hidden /> {option.label}
      </span>
      {showHint && <span className="text-xs font-normal text-gray-500">{option.hint}</span>}
    </span>
  );
}