import { Button } from "@/components/ui/button"
import Link from "next/link"

interface HeroSectionProps {
  title: string
  description: string
  primaryActionLabel: string
  primaryActionHref: string
  secondaryActionLabel?: string
  secondaryActionHref?: string
  align?: "center" | "left"
  image?: string
}

export function HeroSection({
  title,
  description,
  primaryActionLabel,
  primaryActionHref,
  secondaryActionLabel,
  secondaryActionHref,
  align = "center",
  image,
}: HeroSectionProps) {
  return (
    <section className="w-full py-12 md:py-24 lg:py-32">
      <div className="container px-4 md:px-6">
        <div className={`grid gap-6 lg:grid-cols-${image ? "2" : "1"} lg:gap-12 items-center`}>
          <div className={`space-y-4 ${align === "center" && !image ? "text-center mx-auto max-w-[85ch]" : ""}`}>
            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">{title}</h1>
            <p className="max-w-[600px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
              {description}
            </p>
            <div className={`flex ${align === "center" && !image ? "justify-center" : ""} gap-4 flex-wrap`}>
              <Link href={primaryActionHref}>
                <Button size="lg">{primaryActionLabel}</Button>
              </Link>
              {secondaryActionLabel && secondaryActionHref && (
                <Link href={secondaryActionHref}>
                  <Button variant="outline" size="lg">
                    {secondaryActionLabel}
                  </Button>
                </Link>
              )}
            </div>
          </div>
          {image && (
            <div className="flex justify-center">
              <img
                src={image || "/placeholder.svg"}
                alt="Hero Image"
                width={550}
                height={550}
                className="aspect-video overflow-hidden rounded-xl object-cover object-center"
              />
            </div>
          )}
        </div>
      </div>
    </section>
  )
}