'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';

interface PreloaderProps {
	fullScreen?: boolean; // If true, overlay entire screen
}

const Preloader = ({ fullScreen = true }: PreloaderProps) => {
	return (
		<div
			className={`${
				fullScreen ? 'fixed inset-0 z-50' : 'relative'
			} flex items-center justify-center bg-background bg-[radial-gradient(ellipse_at_center,rgba(203,178,106,0.15)_0%,transparent_80%)] ${
				fullScreen ? 'backdrop-blur-sm' : ''
			}`}
		>
			{/* Main content */}
			<motion.div
				className="flex flex-col items-center justify-center px-4 text-center"
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ duration: 0.6, ease: 'easeOut' }}
			>
				{/* Logo with floating animation */}
				<motion.div
					className="relative w-36 h-36 md:w-48 md:h-48 mb-6"
					animate={{
						y: [0, -8, 0],
						scale: [1, 1.02, 1],
					}}
					transition={{
						repeat: Infinity,
						duration: 3,
						ease: 'easeInOut',
					}}
				>
					<Image
						src="/default/logo.png"
						alt="Trust Luxury Transportation Logo"
						fill
						className="object-contain drop-shadow-2xl"
						priority
					/>
				</motion.div>

				{/* Brand Name */}
				<motion.h1
					className="font-serif text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-2"
					initial={{ opacity: 0 }}
					animate={{ opacity: 1 }}
					transition={{ delay: 0.2, duration: 0.5 }}
				>
					<span className="bg-linear-to-r from-white to-[#CBB26A] bg-clip-text text-transparent">
						Trust Luxury Transportation
					</span>
				</motion.h1>

				{/* Tagline */}
				<motion.p
					className="text-sm md:text-base text-white/80 font-light tracking-[0.2em] uppercase mb-8"
					initial={{ opacity: 0 }}
					animate={{ opacity: 1 }}
					transition={{ delay: 0.3, duration: 0.5 }}
				>
					Premium Chauffeur & Luxury Car Services
				</motion.p>

				{/* Modern Spinner */}
				<motion.div
					className="w-16 h-0.5 bg-[#CBB26A]/30 rounded-full overflow-hidden"
					initial={{ opacity: 0 }}
					animate={{ opacity: 1 }}
					transition={{ delay: 0.4 }}
				>
					<motion.div
						className="h-full bg-[#CBB26A] rounded-full"
						animate={{
							width: ['0%', '100%', '0%'],
							x: ['-100%', '0%', '100%'],
						}}
						transition={{
							repeat: Infinity,
							duration: 1.8,
							ease: 'easeInOut',
						}}
					/>
				</motion.div>
			</motion.div>
		</div>
	);
};

export default Preloader;