'use client';

import { motion } from 'framer-motion';

interface MinimalHeroBannerProps {
	title: string;
	subtitle: string;
	backgroundImage?: string;
}

const MinimalHeroBanner = ({
	title,
	subtitle,
	backgroundImage,
}: MinimalHeroBannerProps) => {
	return (
		<section className="relative w-full flex items-center justify-center overflow-hidden min-h-[360] py-16 md:py-20 ">
			{/* Background Image */}
			{backgroundImage && (
				<div
					className="absolute inset-0 bg-cover bg-center"
					style={{ backgroundImage: `url(${backgroundImage})` }}
				/>
			)}

			{/* Overlay */}
			<div className="absolute inset-0 bg-[#110D09]/65" />

			{/* Content */}
			<div className="relative z-10 text-center px-4 max-w-3xl mx-auto">
				<motion.h1
					initial={{ opacity: 0, y: 20 }}
					animate={{ opacity: 1, y: 0 }}
					transition={{ duration: 0.6 }}
					className="font-playfair text-3xl md:text-5xl font-bold mb-4 md:mb-6 text-white"
				>
					{title}
				</motion.h1>

				<div className="w-14 h-px mx-auto mb-6 md:mb-8 bg-[#CBB26A]" />

				<motion.p
					initial={{ opacity: 0, y: 20 }}
					animate={{ opacity: 1, y: 0 }}
					transition={{ duration: 0.6, delay: 0.15 }}
					className="text-sm md:text-lg text-[#B8B2A8]"
				>
					{subtitle}
				</motion.p>
			</div>
		</section>
	);
};

export default MinimalHeroBanner;