"use client";

import useMedia from "@/hooks/use-media";
import { CarouselItem } from "./ui/carousel";
import Image from "next/image";
import { Loader2 } from "lucide-react";

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

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

	return (
		<>
			{data?.items.map((i) => (
				<CarouselItem key={i.id} className="pl-[20px] md:max-w-[452px]">
					<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>
			))}
		</>
	);
}