interface Props {
  eyebrow?: string;
  title: string;
  description?: string;
  align?: "center" | "left";
}

export default function SectionHeading({ eyebrow, title, description, align = "center" }: Props) {
  const alignment = align === "center" ? "text-center items-center mx-auto" : "text-left items-start";
  return (
    <div className={`flex flex-col gap-4 max-w-2xl ${alignment}`}>
      {eyebrow ? (
        <span className="text-xs font-semibold tracking-[0.2em] uppercase text-accent-500">
          {eyebrow}
        </span>
      ) : null}
      <h2 className="font-display text-3xl md:text-4xl text-neutral-900">{title}</h2>
      {description ? <p className="text-neutral-600 leading-relaxed">{description}</p> : null}
    </div>
  );
}