/**
 * Standard ABiiR eyebrow (Jost). Single line, full text (no clipping).
 * `surface`: burgundy on light backdrops, cream on dark.
 */
export type AbiirEyebrowSurface = 'light' | 'dark';

const SURFACE_COLOR: Record<AbiirEyebrowSurface, string> = {
  light: '#5D0B24',
  dark: '#faf8f3',
};

export type AbiirEyebrowProps = {
  children: React.ReactNode;
  /** `light` = burgundy (#5D0B24). `dark` = cream (#faf8f3) for dark backdrops. */
  surface?: AbiirEyebrowSurface;
  className?: string;
  as?: 'p' | 'span';
  /**
   * `uppercase` (default): CSS small caps style for standard eyebrows.
   * `preserve`: no transform — use when the string must keep mixed case (e.g. ABiiR).
   */
  textCase?: 'uppercase' | 'preserve';
};

export function AbiirEyebrow({
  children,
  surface = 'light',
  className = '',
  as: Tag = 'p',
  textCase = 'uppercase',
}: AbiirEyebrowProps) {
  /** ~8% smaller than 12/16.575/2.763 spec; nowrap keeps one line without truncation. */
  const caseClass = textCase === 'preserve' ? 'normal-case' : 'uppercase';
  const base =
    `m-0 whitespace-nowrap text-center font-["Jost",sans-serif] text-[11px] font-medium not-italic ${caseClass} leading-[15.194px] tracking-[2.533px]`;
  return (
    <Tag
      className={[base, className].filter(Boolean).join(' ')}
      style={{color: SURFACE_COLOR[surface]}}
    >
      {children}
    </Tag>
  );
}