// src/components/ui/pill.tsx
import { cn } from "@/lib/utils";

/**
 * Shared "dark substrate" pill: accent @10% background, @30% border,
 * full-opacity accent text. Harmonized across backlink + keyword badges.
 */
export const PILL =
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold tracking-wide";

export const ACCENT = {
  emerald: "border-emerald-500/30 bg-emerald-500/10 text-emerald-400",
  amber: "border-amber-500/30 bg-amber-500/10 text-amber-400",
  rose: "border-rose-500/30 bg-rose-500/10 text-rose-400",
  primary: "border-primary/30 bg-primary/10 text-primary",
  neutral: "border-border bg-muted text-muted-foreground",
} as const;

export type PillAccent = keyof typeof ACCENT;

export function Pill({
  accent = "neutral",
  className,
  title,
  children,
}: {
  accent?: PillAccent;
  className?: string;
  title?: string;
  children: React.ReactNode;
}) {
  return (
    <span className={cn(PILL, ACCENT[accent], className)} title={title}>
      {children}
    </span>
  );
}

const SWATCH: Record<PillAccent, string> = {
  emerald: "bg-emerald-500",
  amber: "bg-amber-500",
  rose: "bg-rose-500",
  primary: "bg-primary",
  neutral: "bg-muted-foreground/60",
};

/**
 * Neutral dark pill with a leading colored square swatch. The swatch conveys
 * the category; the label text stays high-contrast/neutral.
 */
export function SwatchPill({
  accent = "neutral",
  title,
  children,
}: {
  accent?: PillAccent;
  title?: string;
  children: React.ReactNode;
}) {
  return (
    <span
      className="inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-muted/40 px-2 py-0.5 text-xs font-medium text-foreground"
      title={title}
    >
      <span
        className={cn("size-2.5 shrink-0 rounded-[3px]", SWATCH[accent])}
        aria-hidden="true"
      />
      {children}
    </span>
  );
}