import * as React from "react"
import { ArrowRightIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

interface HeroSectionProps {
  announcement?: string
  title: string
  description: string
  primaryAction: { label: string; href: string }
  secondaryAction?: { label: string; href: string }
}

export function HeroSection({
  announcement,
  title,
  description,
  primaryAction,
  secondaryAction,
}: HeroSectionProps) {
  return (
    <section className="flex flex-col items-center gap-6 px-6 py-24 text-center">
      {announcement && (
        <Badge variant="secondary" className="rounded-full px-3 py-1">
          {announcement}
        </Badge>
      )}
      <h1 className="max-w-3xl text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        {title}
      </h1>
      <p className="max-w-xl text-balance text-lg text-muted-foreground">
        {description}
      </p>
      <div className="mt-2 flex flex-wrap items-center justify-center gap-3">
        <Button size="lg" asChild>
          <a href={primaryAction.href}>
            {primaryAction.label}
            <ArrowRightIcon />
          </a>
        </Button>
        {secondaryAction && (
          <Button size="lg" variant="outline" asChild>
            <a href={secondaryAction.href}>{secondaryAction.label}</a>
          </Button>
        )}
      </div>
    </section>
  )
}