import React from 'react';

interface SectionHeaderProps {
  id?: string;
  title: string;
  subtitle?: string;
  className?: string;
}

const SectionHeader = ({ id, title, subtitle, className = '' }: SectionHeaderProps) => (
  <div className={`text-center ${className}`}>
    <h2
      id={id}
      className="font-serif text-3xl md:text-4xl font-semibold tracking-tight text-foreground mb-4"
    >
      {title}
    </h2>
    {subtitle && (
      <p className="text-base md:text-lg text-muted-foreground max-w-3xl mx-auto">{subtitle}</p>
    )}
  </div>
);

export default React.memo(SectionHeader);