"use client";

import useMedia from "@/hooks/use-media";
import { CarouselItem } from "./ui/carousel";
import { Loader2 } from "lucide-react";
import { useState } from "react";
import Lightbox, { SlideImage } from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import Zoom from "yet-another-react-lightbox/plugins/zoom";

export default function HomepageGalleryItems() {
	const {
		data,
		error,
		mutate,
		setPage,
		success,
		setLimit,
		isLoading,
		isValidating,
	} = useMedia(20);

	const [index, setIndex] = useState<number | null>(null);

	if (isLoading) {
		return (
			<div className="flex justify-center w-full h-full">
				<Loader2 className="animate-spin" />
			</div>
		);
	}

	return (
		<>
			{data?.items.map((i, idx) => (
				<CarouselItem
					key={i.id}
					onClick={() => setIndex(idx)}
					className="pl-[20px] md:max-w-[452px] cursor-pointer"
				>
					<div className="w-full aspect-square">
						<img
							src={i.url}
							alt={i.alt}
							className="inset-0 border rounded-sm w-full h-full object-cover"
						/>
					</div>
				</CarouselItem>
			))}
			<Lightbox
				open={index !== null}
				close={() => setIndex(null)}
				slides={data?.items.map((i) => ({ src: i.url }))}
				index={index ?? 0}
				plugins={[Zoom]}
			/>
		</>
	);
}