import type { HTMLAttributes } from 'react';
import { cn } from '@/lib/utils';

/*
 * Eyebrow — rótulo acima do título de seção.
 * DS: cor primary (primary-main), Body Bold 16px. Sem uppercase.
 * Sobre fundo escuro (hero/banner), passar className com text-white.
 */
export function Eyebrow({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
    return (
        <span
            className={cn('inline-block text-body font-bold text-primary', className)}
            {...props}
        />
    );
}