"use client";

import { X } from "lucide-react";
import { tagChipTokens } from "@/lib/tags/colour";

/**
 * A Tag chip in the app's one calm, AA-safe chip vocabulary (ADR-0013,
 * PRODUCT.md): a soft tint of the Tag's freeform hex, a colour dot, and dark
 * hue-preserving ink that stays legible for any colour. Shared across the
 * property table, tags filter, bulk bar, upload, settings, and run UI so every
 * surface reads as one system.
 */
export function TagChip({
  name,
  colour,
  size = "sm",
  onRemove,
  title,
}: {
  name: string;
  colour: string;
  size?: "xs" | "sm";
  onRemove?: () => void;
  title?: string;
}) {
  const tokens = tagChipTokens(colour);
  const sizing =
    size === "xs"
      ? "gap-1 px-1.5 py-0.5 text-[10px]"
      : "gap-1.5 px-2 py-0.5 text-[11px]";
  const dot = size === "xs" ? "h-1.5 w-1.5" : "h-2 w-2";
  return (
    <span
      className={`inline-flex max-w-[10rem] items-center rounded-full border font-medium leading-none ${sizing}`}
      style={{
        backgroundColor: tokens.backgroundColor,
        borderColor: tokens.borderColor,
        color: tokens.color,
      }}
      title={title ?? name}
    >
      <span className={`${dot} shrink-0 rounded-full`} style={{ backgroundColor: tokens.dot }} />
      <span className="truncate">{name}</span>
      {onRemove && (
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onRemove();
          }}
          className="-mr-0.5 shrink-0 rounded-full opacity-70 transition hover:opacity-100"
          aria-label={`Remove ${name}`}
        >
          <X className="h-3 w-3" />
        </button>
      )}
    </span>
  );
}
