type SectionHeaderProps = {
  eyebrow: string;
  title: string;
  description?: string;
};

export default function SectionHeader({
  eyebrow,
  title,
  description,
}: SectionHeaderProps) {
  return (
    <div className="mx-auto mb-10 max-w-2xl text-center">
      <p className="text-xs uppercase tracking-[0.4em] text-cyan-200/80">
        {eyebrow}
      </p>
      <h2 className="mt-4 text-3xl font-semibold text-white md:text-4xl">
        {title}
      </h2>
      {description ? (
        <p className="mt-3 text-sm text-slate-300">{description}</p>
      ) : null}
    </div>
  );
}