export default function SectionHeading({
  eyebrow,
  title,
  description,
  className = ""
}: {
  eyebrow?: string;
  title: string;
  description?: string;
  className?: string;
}) {
  return (
    <div className={className}>
      {eyebrow ? (
        <p className="text-xs font-bold uppercase tracking-[0.14em] text-accent-500 mb-3">{eyebrow}</p>
      ) : null}
      <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-ink">{title}</h2>
      {description ? <p className="mt-3 text-neutral-700 max-w-2xl">{description}</p> : null}
    </div>
  );
}