/**
 * Which of the nine kinds a template or artefact is.
 *
 * The tone is neutral for every kind, deliberately. The badge palette here is
 * semantic — positive, warning, danger, info mean something about a number —
 * and the kinds are a taxonomy, not a severity scale; colouring them would
 * teach people to read "case study" as good news. The differentiation comes
 * from the glyph instead, which is what lets a mixed list of artefacts be
 * scanned by shape rather than read word by word.
 */
import {
  BookOpen,
  FileText,
  FlaskConical,
  Gauge,
  MessagesSquare,
  Network,
  Route,
  Search,
  Tags,
  type LucideIcon,
} from 'lucide-react';
import { MOTION_KIND_DESCRIPTIONS, MOTION_KIND_LABELS, type MotionKind } from '@pig/core';
import { Badge, cn } from '@/components/ui';

const KIND_ICONS: Record<MotionKind, LucideIcon> = {
  discovery: Search,
  qualification: Gauge,
  poc: FlaskConical,
  proposal: FileText,
  pricing: Tags,
  architecture: Network,
  case_study: BookOpen,
  narrative: MessagesSquare,
  playbook: Route,
};

export function MotionKindBadge({
  kind,
  /** Glyph only, for a dense row where the label is already in the title. */
  iconOnly = false,
  className,
}: {
  kind: MotionKind;
  iconOnly?: boolean;
  className?: string;
}) {
  const Icon = KIND_ICONS[kind];
  const label = MOTION_KIND_LABELS[kind];
  return (
    <Badge
      tone="neutral"
      // The description is the only definition of a kind most people will ever
      // read, and there is nowhere else on a card to put it.
      title={`${label} — ${MOTION_KIND_DESCRIPTIONS[kind]}`}
      className={cn('min-w-0 max-w-full', className)}
    >
      <Icon className="size-3 shrink-0" aria-hidden />
      {iconOnly ? <span className="sr-only">{label}</span> : <span className="truncate">{label}</span>}
    </Badge>
  );
}
