import type { ReactNode } from "react"

interface SectionTitleProps {
  overline?: string
  title: ReactNode
  subtitle?: string
  className?: string
  align?: "left" | "center" | "right"
}

export function SectionTitle({ overline, title, subtitle, className, align = "center" }: SectionTitleProps) {
  const textAlignClass = {
    left: "text-left items-start",
    center: "text-center items-center",
    right: "text-right items-end",
  }[align]

  return (
    <div className={`flex flex-col ${textAlignClass} gap-2 mb-12 md:mb-16 ${className}`}>
      {overline && <span className="text-sm font-semibold text-primary uppercase tracking-wider">{overline}</span>}
      <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-foreground leading-tight text-balance">
        {title}
      </h2>
      {subtitle && (
        <p className="mt-3 text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto text-balance">{subtitle}</p>
      )}
    </div>
  )
}