import { ExternalLink } from "lucide-react";

import { Button } from "@/components/ui/button";
import Link from "next/link";
import { API_URL, SITE_NAME } from "@/lib/constants";
import Image from "next/image";
import Logo from "./logo";

const Hero: React.FC<{ background: string }> = ({ background }) => {
	return (
		<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
			<div className="">
				<Image
					src={background}
					layout="fill"
					// objectFit="cover"
					priority
					alt="Hero image"
					unoptimized
					className="grayscale object-cover "
				/>
				{/* Gradient and Blur Overlay */}
				<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent bg-opacity-30 backdrop-blur-sm"></div>
				<div className="mx-auto flex max-w-5xl flex-col items-center">
					<div className="z-10 flex flex-col items-center gap-6 text-center">
						<Logo className="min-w-16 min-h-16 max-h-44 max-w-44 text-white" />
						<div>
							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl font-times">
								Trouvez votre <em>équilibre</em> avec
								<br />
								<span className="font-extrabold text-3xl lg:text-6xl">
									{SITE_NAME}
								</span>
							</h1>
							<p className="text-muted-foreground lg:text-xl">
								Une évolution des arts martiaux Philippins
							</p>
						</div>
						<div className="mt-4 flex justify-center gap-2">
							<Button>
								<Link href="/contact">Nous contacter</Link>
							</Button>
							<Button variant="outline">
								<Link
									href="/about"
									className="flex items-center"
								>
									À propos
									<ExternalLink className="ml-2 h-4" />
								</Link>
							</Button>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};

export default Hero;