import { Heading, Text } from "./Typography";

interface SectionHeaderProps {
  title: string;
  description: string;
  titleClassName?: string;
  descriptionClassName?: string;
  className?: string;
}

export function SectionHeader({ 
  title, 
  description, 
  titleClassName = "", 
  descriptionClassName = "",
  className = ""
}: SectionHeaderProps) {
  return (
    <div className={`max-w-[800px] ${className}`}>
      <Heading level={2} className={`mb-4 ${titleClassName}`}>{title}</Heading>
      <Text size="lg" className={descriptionClassName}>
        {description}
      </Text>
    </div>
  );
}