import Container from "@/components/ui/Container";
import { cn } from "@/lib/utils";

interface PageHeroProps {
  title: string;
  description?: string;
  backgroundImage?: string;
}

export default function PageHero({ title, description, backgroundImage }: PageHeroProps) {
  return (
    <section
      className={cn(
        "relative flex items-end overflow-hidden py-20 sm:py-28 lg:py-32",
        backgroundImage ? "bg-neutral-900" : "bg-gradient-to-br from-neutral-900 to-primary-950"
      )}
    >
      {backgroundImage && (
        <div className="absolute inset-0">
          <img
            src={backgroundImage}
            alt=""
            className="h-full w-full object-cover opacity-70"
            width={1920}
            height={600}
            aria-hidden="true"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-neutral-900/70 via-neutral-900/30 to-transparent" />
          <div className="absolute inset-0 bg-gradient-to-r from-neutral-900/60 to-transparent" />
        </div>
      )}
      <Container className="relative">
        <div className="mb-4 h-1 w-16 rounded bg-primary-500" />
        <h1 className="text-3xl font-bold tracking-tight !text-white drop-shadow-lg sm:text-4xl lg:text-display">
          {title}
        </h1>
        {description && (
          <p className="mt-4 max-w-2xl text-lg !text-white/80 leading-relaxed drop-shadow-md">
            {description}
          </p>
        )}
      </Container>
    </section>
  );
}
