'use client';

import { containerVariants, itemVariants } from '@/constant/service';
import { useGetPublicServiceQuery } from '@/store/slice/publicApi';
import { motion } from 'framer-motion';
import Image from 'next/image';
import ServiceSkeleton from '@/components/skeletons/service-skeleton';
import { useRouter } from 'next/navigation';

const ServicesForService = () => {
	const router = useRouter();
	const { data: serviceData, isLoading } = useGetPublicServiceQuery();
	const services = Array.isArray(serviceData) ? serviceData : [];

	return (
		<section
			id="services"
			className="relative py-32 sm:py-40 lg:py-48"
			style={{ backgroundColor: '#110D09' }}
		>
			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				{/* Services List */}
				<motion.div
					variants={containerVariants}
					initial="hidden"
					whileInView="visible"
					viewport={{ once: true, margin: '-100px' }}
					className="space-y-6 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-10"
				>
					{/* Skeleton Loaders */}
					{isLoading &&
						Array.from({ length: 4 }).map((_, i) => (
							<ServiceSkeleton key={i} />
						))}

					{/* Services */}
					{!isLoading &&
						services.map((service, index) => (
							<motion.div
								key={index}
								variants={itemVariants}
								className="group"
							>
								<div className="flex h-[342] lg:h-[500] flex-col p-6 rounded-xl border border-white/10 hover:border-[#CBB26A] transition-all duration-300 hover:bg-white/5">
									{/* Image */}
									<div className="relative w-full aspect-4/3 overflow-hidden rounded-lg mb-5">
										<Image
											src={service.image ?? '/default/logo.png'}
											alt={service.title}
											fill
											className="object-cover transition-transform duration-500 group-hover:scale-105"
											sizes="(max-width: 768px) 100vw, 400px"
										/>
									</div>

									{/* Title */}
									<h3 className="font-serif text-lg font-bold text-white mb-3 group-hover:text-[#CBB26A] transition-colors duration-300">
										{service.title}
									</h3>

									{/* Description */}
									<p className="text-foreground/60 text-sm leading-relaxed mb-4">
										{service.description}
									</p>

									{/* Book Now Button */}
									<motion.button
										onClick={() =>
											router.push(
												`/book?type=service&service=${service.id}`
											)
										}
										whileHover={{
											scale: 1.05,
											boxShadow: '0 0 20px rgba(203, 178, 106, 0.3)',
										}}
										whileTap={{ scale: 0.95 }}
										className="w-full px-6 py-2 bg-[#CBB26A] text-[#111111] rounded-lg font-bold hover:bg-[#B89E55] transition-all duration-300 text-sm"
									>
										BOOK NOW
									</motion.button>
								</div>
							</motion.div>
						))}
				</motion.div>
			</div>
		</section>
	);
};

export default ServicesForService;