import * as React from 'react';

import { Badge } from '@/components/badge';
import type { RowKind } from '~/figma/spec';

/**
 * The one tint table for a comparison verdict.
 *
 * Both places that report parity — the document-wide page and the per-component
 * Figma panel — draw the same five kinds, and both had their own copy of the
 * mapping. What they do *not* share is the wording: parity's `state` says "state
 * axis" because the axis is the subject there, the panel's says "drawn in CSS"
 * because the rendering is. So the word stays with each page's catalogue and
 * only the appearance lives here.
 *
 * `colorPalette` rather than a literal colour, which is the point of using the
 * kit's own Badge: a `figma-sync` that moves the green ramp moves these too.
 */

export type BadgeKind = RowKind | 'slot';

type Appearance = Pick<React.ComponentProps<typeof Badge>, 'variant' | 'colorPalette'>;

/* `secondary` here is Badge's neutral-grey shorthand, not the turquoise
   `colorPalette="secondary"` ramp — the two names collide, which the kit
   documents on `badgeVariants`. It is what "no verdict to give" looks like. */
const APPEARANCE: Record<BadgeKind, Appearance> = {
  match: { variant: 'subtle', colorPalette: 'green' },
  diff: { variant: 'subtle', colorPalette: 'yellow' },
  'no-prop': { variant: 'subtle', colorPalette: 'red' },
  state: { variant: 'secondary' },
  extra: { variant: 'secondary' },
  slot: { variant: 'secondary' },
};

/** The verdict pill. The caller passes the already-translated word as children. */
export function KindBadge({ kind, children }: { kind: BadgeKind; children: React.ReactNode }) {
  return (
    <Badge size="xs" className="rounded-full px-2" {...APPEARANCE[kind]}>
      {children}
    </Badge>
  );
}

/**
 * The same palette roles as a bare class, for the one place that tints a whole
 * table row rather than a pill — a Badge cannot be a `<tr>`.
 */
export const tint = (palette: string) => `palette-${palette} bg-(--ctl-subtle) text-(--ctl-fg)`;