import type { CSSProperties } from 'react';

type WordmarkProps = {
  size?: number;
  cursor?: boolean;
  animated?: boolean;
  ariaLabel?: string;
};

/**
 * VYNDR wordmark. IBM Plex Mono 800, RGB-split letters, glowing R, blinking cursor.
 * The R is the brand — always green (#00D4A0), always intercepted-looking.
 * `aria-label` exposes the readable brand to screen readers; per-letter spans are aria-hidden.
 */
export default function Wordmark({
  size = 22,
  cursor = true,
  animated = true,
  ariaLabel = 'VYNDR',
}: WordmarkProps) {
  const style: CSSProperties & { '--wm-size'?: string } = {
    fontSize: size,
    '--wm-size': `${size}px`,
  };
  return (
    <span
      className={`wordmark${animated ? ' wm-anim' : ''}`}
      style={style}
      role="img"
      aria-label={ariaLabel}
    >
      <span className="vynd" aria-hidden>
        <span className="wm-letter" data-text="V">V</span>
        <span className="wm-letter" data-text="Y">Y</span>
        <span className="wm-letter" data-text="N">N</span>
        <span className="wm-letter" data-text="D">D</span>
      </span>
      <span className="r wm-letter" data-text="R" aria-hidden>R</span>
      {cursor ? <span className="wm-cursor" aria-hidden /> : null}
    </span>
  );
}