import { ReactNode } from "react";
import Container from "@/components/ui/Container";

interface Props {
  title: string;
  description?: string;
  imageUrl?: string;
  children?: ReactNode;
  size?: "lg" | "md";
}

export default function Hero({ title, description, imageUrl, children, size = "md" }: Props) {
  const height =
    size === "lg"
      ? "min-h-[520px] [@media(max-height:600px)]:min-h-[380px]"
      : "min-h-[340px] [@media(max-height:500px)]:min-h-[260px]";
  return (
    <section
      className={`relative ${height} flex items-center bg-neutral-800 text-white`}
      style={
        imageUrl
          ? {
              backgroundImage: `linear-gradient(rgba(28,25,21,0.55), rgba(28,25,21,0.65)), url(${imageUrl})`,
              backgroundSize: "cover",
              backgroundPosition: "center"
            }
          : undefined
      }
    >
      <Container className="py-16 [@media(max-height:600px)]:py-8">
        <div className="max-w-2xl">
          <h1 className="font-display text-3xl md:text-5xl leading-tight">{title}</h1>
          {description ? <p className="mt-4 text-neutral-200 leading-relaxed">{description}</p> : null}
          {children ? <div className="mt-8">{children}</div> : null}
        </div>
      </Container>
    </section>
  );
}