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

/*
 * SectionTitle — H2 padrão de seção.
 * DS: cor gray-700; Heading Small (23px) no mobile → Heading Medium (27px) no desktop.
 * Sobre fundo escuro, passar className com text-white.
 */
export function SectionTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
    return (
        <h2
            className={cn(
                'font-display text-heading-sm font-bold text-gray-700 web:text-heading-md',
                className,
            )}
            {...props}
        />
    );
}