import React from 'react';
import { Reveal } from './Reveal';
type SectionHeadingProps = {
  eyebrow: string;
  title: string;
  description?: string;
  align?: 'left' | 'center';
  dark?: boolean;
};
export function SectionHeading({
  eyebrow,
  title,
  description,
  align = 'left',
  dark = false
}: SectionHeadingProps) {
  return (
    <Reveal
      className={`max-w-2xl ${align === 'center' ? 'mx-auto text-center' : ''}`}>
      
      <p
        className={`font-display text-xs font-semibold uppercase tracking-[0.2em] ${dark ? 'text-brand-bright' : 'text-brand-deep'}`}>
        
        {eyebrow}
      </p>
      <h2
        className={`mt-3 font-display text-3xl font-bold leading-tight sm:text-4xl ${dark ? 'text-white' : 'text-brand-ink'}`}>
        
        {title}
      </h2>
      {description &&
      <p
        className={`mt-4 text-base leading-relaxed sm:text-lg ${dark ? 'text-white/70' : 'text-brand-ink/70'}`}>
        
          {description}
        </p>
      }
    </Reveal>);

}