import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

import { cn } from "@/lib/utils";

import { sourceHue, sourceInitials } from "@/lib/utils";

const NAMES: Record<string, string> = {

  ticketmaster: "Ticketmaster",

  seatgeek: "SeatGeek",

  axs: "AXS",

  stubhub: "StubHub",

  vividseats: "Vivid Seats",

  fifa: "FIFA",

  seetickets: "See Tickets",

};

export function SourceChip({ id, size = 24, className }: { id: string; size?: number; className?: string }) {

  const name = NAMES[id] ?? id;

  const hue = sourceHue(id);

  return (

    <Tooltip>

      <TooltipTrigger asChild>

        <span

          className={cn(

            "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] font-mono font-semibold",

            className,

          )}

          style={{

            width: size,

            height: size,

            fontSize: size * 0.42,

            color: `oklch(0.82 0.12 ${hue})`,

            backgroundColor: `oklch(0.82 0.12 ${hue} / 0.14)`,

            border: `1px solid oklch(0.82 0.12 ${hue} / 0.28)`,

          }}

          aria-label={name}

        >

          {sourceInitials(name)}

        </span>

      </TooltipTrigger>

      <TooltipContent>{name}</TooltipContent>

    </Tooltip>

  );

}