import type { ElementType, ReactNode } from 'react';

// The short gold line in letter-spaced caps that announces each section.
//
// It used to be hand-written in eight places, and the colour travelled with it:
// `text-dorado` reads at 6,07:1 on azul-profundo and at 2,76:1 on white, so
// half of those copies were illegible and every fix had to be made eight times.
// The rule lives here now, and the default is the safe one — forgetting the
// prop cannot produce an unreadable antetítulo.
//
// `as` takes `motion.p` where the section wants it to animate in, and `h2`
// where the antetítulo is the only heading the section has.

type Fondo = 'claro' | 'oscuro';

const tono: Record<Fondo, string> = {
  claro: 'text-dorado-texto',
  oscuro: 'text-dorado',
};

export function Antetitulo({
  children,
  sobre = 'claro',
  as: Tag = 'p',
  className = '',
  ...rest
}: {
  children: ReactNode;
  sobre?: Fondo;
  as?: ElementType;
  className?: string;
  // Whatever the caller's `as` needs — in practice Framer's variants/viewport
  // props when a section wants its antetítulo to animate in.
  [prop: string]: unknown;
}) {
  return (
    <Tag className={['text-rotulo uppercase font-semibold', tono[sobre], className].filter(Boolean).join(' ')} {...rest}>
      {children}
    </Tag>
  );
}