import type { CSSProperties } from 'react';

const SIZES: Record<string, number> = { sm: 18, md: 22, lg: 34 };

type WordmarkProps = {
  /** Pixel size or a named variant (sm 18 / md 22 / lg 34). */
  size?: number | 'sm' | 'md' | 'lg';
  /** Render the live blinking phosphor caret after the R. */
  cursor?: boolean;
  /** Render the BETA clearance pill. */
  beta?: boolean;
  style?: CSSProperties;
  ariaLabel?: string;
};

/**
 * VYNDR 2.0 signature wordmark (§4). Inter 800 with RGB chromatic-aberration
 * (::before #ff2d6f / ::after #2dffd5), a permanently grade-green glowing R,
 * and a blinking caret. The `wm-tear` glitch fires twice per 5s cycle — restraint
 * is the premium. Appears EVERYWHERE the name does. Data never glitches; this does.
 */
export default function Wordmark({
  size = 'md',
  cursor = true,
  beta = false,
  style = {},
  ariaLabel = 'VYNDR',
}: WordmarkProps) {
  const px = typeof size === 'number' ? size : SIZES[size] ?? SIZES.md;
  return (
    <span
      style={{ display: 'inline-flex', alignItems: 'center', gap: Math.round(px * 0.55) }}
      role="img"
      aria-label={beta ? `${ariaLabel} beta` : ariaLabel}
    >
      <span className="wm" data-text="VYNDR" style={{ fontSize: px, ...style }} aria-hidden>
        VYND<span className="wm-r">R</span>
        {cursor && <span className="wm-cursor" />}
      </span>
      {beta && <span className="wm-beta" aria-hidden>BETA</span>}
    </span>
  );
}
