import { cn } from '@/lib/utils';

export function SectionHeading({
  eyebrow,
  title,
  description,
  align = 'left',
  className,
}: {
  eyebrow?: string;
  title: string;
  description?: string;
  align?: 'left' | 'center';
  className?: string;
}) {
  return (
    <div
      className={cn(
        'max-w-2xl',
        align === 'center' && 'mx-auto text-center',
        className,
      )}
    >
      {eyebrow && (
        <p className="font-mono text-xs uppercase tracking-[0.2em] text-foreground/40">
          {eyebrow}
        </p>
      )}
      <h2
        className={cn(
          'text-3xl font-semibold tracking-tight sm:text-4xl',
          eyebrow && 'mt-4',
        )}
      >
        {title}
      </h2>
      {description && (
        <p className="mt-5 text-lg leading-8 text-foreground/55">
          {description}
        </p>
      )}
    </div>
  );
}