import ServiceCard from './ServiceCard';
import { Service } from '@/types/service';
import { useGetServicesQuery } from '@/store/slice/serviceApi';
import LoadingSpinner from '@/components/loader/LoadingSpinner';

const itemVariants = {
	hidden: { opacity: 0, y: 20 },
	visible: {
		opacity: 1,
		y: 0,
		transition: { duration: 0.6, ease: 'easeOut' as const },
	},
};

const ServicesList = ({
	setEditService,
	isDialogOpen,
	setIsDialogOpen,
}: {
	setEditService: (service: Service) => void;
	setIsDialogOpen: (open: boolean) => void;
	isDialogOpen: boolean;
}) => {
	const { data: services, isLoading } = useGetServicesQuery();
	if (isLoading) {
		return (
			<div className="flex h-[50vh] items-center justify-center">
				<LoadingSpinner className="text-accent" size="lg" />
			</div>
		);
	}

	return (
		<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
			{services?.map((service, index) => (
				<ServiceCard
					key={index}
					service={service}
					index={index}
					itemVariants={itemVariants}
					setEditService={setEditService}
					isDialogOpen={isDialogOpen}
					setIsDialogOpen={setIsDialogOpen}
				/>
			))}
		</div>
	);
};

export default ServicesList;