import * as React from 'react';
import { cn } from '../../shared/utils';
import { ISOTYPE_COLORS } from './patterns';
import {
  getIsotypeMiniVariant,
  ISOTYPE_MINI_PATTERNS,
  type IsotypeMiniPatternId,
} from './mini-patterns';

export interface IsotypeMiniProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Which registered pattern to render. */
  pattern?: IsotypeMiniPatternId;
  /**
   * Deterministic seed selecting one cell to render as blank. Omit to render
   * the pure, fully-filled base pattern — the correct choice for canonical
   * brand-mark placements.
   */
  variantSeed?: number;
  /** Accessible label. Omit for purely decorative use. */
  'aria-label'?: string;
}

/**
 * A 3x3 grid brand mark — the third in the Xertica "isotipos" series, a
 * compact sibling of the 4x4 `Isotype`. Cells render flush against each
 * other so the grid reads as a single composed image.
 *
 * @ai-rules
 * 1. Colors are fixed brand hex values (see `patterns.ts`), not theme tokens — never make them theme-reactive.
 * 2. Never add a `gap-*` utility or per-cell border between cells — it breaks the "single image" look.
 * 3. Add new patterns via `ISOTYPE_MINI_PATTERNS`/`IsotypeMiniPatternId` in `mini-patterns.ts`; this component never needs to change.
 * 4. Only pass `variantSeed` for decorative/repeated placements — canonical brand-mark spots should use the pure base pattern.
 */
export function IsotypeMini({
  pattern = 'core',
  variantSeed,
  className,
  'aria-label': ariaLabel,
  ...props
}: IsotypeMiniProps) {
  const cells =
    variantSeed === undefined
      ? ISOTYPE_MINI_PATTERNS[pattern]
      : getIsotypeMiniVariant(pattern, variantSeed);

  return (
    <div
      role={ariaLabel ? 'img' : undefined}
      aria-label={ariaLabel}
      aria-hidden={ariaLabel ? undefined : true}
      className={cn(
        'grid aspect-square grid-cols-3 grid-rows-3',
        className
      )}
      {...props}
    >
      {cells.map((cell, index) => (
        <div
          key={index}
          style={{ backgroundColor: cell === 'blank' ? undefined : ISOTYPE_COLORS[cell] }}
        />
      ))}
    </div>
  );
}