import type { ItemKind } from "@/db/schema";

export const TONE: Record<ItemKind, { chip: string; dot: string; text: string; soft: string }> = {
  allergy: { chip: "bg-all-soft text-all-ink", dot: "bg-all", text: "text-all", soft: "bg-all-soft" },
  intolerance: { chip: "bg-int-soft text-int-ink", dot: "bg-int", text: "text-int", soft: "bg-int-soft" },
  dislike: { chip: "bg-dis-soft text-dis-ink", dot: "bg-dis", text: "text-dis", soft: "bg-dis-soft" },
  favorite: { chip: "bg-fav-soft text-fav-ink", dot: "bg-fav", text: "text-fav", soft: "bg-fav-soft" },
};

export function Chip({
  kind,
  children,
  onRemove,
  pending,
}: {
  kind: ItemKind;
  children: React.ReactNode;
  onRemove?: () => void;
  pending?: boolean;
}) {
  return (
    <span
      className={`inline-flex min-h-9 items-center gap-1 rounded-chip py-1.5 text-[15px] leading-tight font-medium ${TONE[kind].chip} ${
        onRemove ? "pr-1 pl-3" : "px-3"
      } ${pending ? "opacity-60" : ""}`}
    >
      {children}
      {onRemove && (
        <button
          type="button"
          onClick={onRemove}
          aria-label={`Togli ${typeof children === "string" ? children : ""}`}
          className="grid size-7 place-items-center rounded-full text-lg leading-none opacity-70 hover:opacity-100 active:scale-90"
        >
          ×
        </button>
      )}
    </span>
  );
}