export function SectionHeading({
  eyebrow,
  heading,
  description,
  align = "left",
}: {
  eyebrow: string
  heading: string
  description?: string
  align?: "left" | "center"
}) {
  const alignment = align === "center" ? "items-center text-center" : "items-start"

  return (
    <div className={`flex max-w-2xl flex-col ${alignment}`}>
      <p className="wedding-section-label">{eyebrow}</p>
      <h2 className="wedding-display-heading mt-5 text-wedding-section text-wedding-ink">
        {heading}
      </h2>
      <div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
      {description ? (
        <p className="mt-7 font-wedding-ui text-wedding-body leading-wedding-body text-wedding-ink">
          {description}
        </p>
      ) : null}
    </div>
  )
}