
import GuestLayout from "@/Layouts/GuestLayout";
import { Head } from "@inertiajs/react";
import { WEBSITE_TITLE } from "@/Config/Constant";
import ImageBlog from "@/Components/ImageBlog";
import BreadcrumbComponent from "@/Components/BreadcrumbComponent";
import Paginator from "@/Components/Paginator";
import { useState } from "react";

export default function Gallery({ galleries }) {
    const [selected, setSelected] = useState(null);
    return (
        <GuestLayout >
            <Head title={`Blog - ${WEBSITE_TITLE}`} />

            <section className="bg-gray-50 dark:bg-gray-600 border-b border-gray-200  dark:border-gray-600">
                <div className="pb-2 px-4 mx-auto max-w-screen-lg lg:pb-4">
                    <div className="mx-auto lg:mx-0 mb-10 bg-red-50 dark:bg-gray-700 p-3">
                        <h2 className="text-3xl font-bold tracking-tight text-gray-800 dark:text-gray-200 sm:text-4xl">
                            Gallery</h2>
                        <BreadcrumbComponent links={
                            [
                                { 'title': 'Gallery', 'path': '#' },
                            ]
                        } />
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
                        {galleries?.data?.map((photo, idx) => (

                            <div
                                key={idx}
                                className="cursor-pointer group"
                                onClick={() => setSelected(photo)}
                            >
                                <div className="relative">
                                    <img
                                        src={photo.file_path}
                                        alt={photo.title}
                                        className="rounded-lg shadow-md object-cover w-full h-40 group-hover:opacity-80 transition"
                                    />
                                </div>
                                {/* Caption */}
                                <p className="mt-2 text-sm text-center text-gray-700">
                                    {photo.title}
                                </p>
                            </div>
                        ))}
                    </div>
                    {galleries?.data?.length > 12 && (
                        <Paginator paginationData={galleries} />
                    )}
                    {selected && (
                        <div
                            className="fixed inset-0 bg-black bg-opacity-75 flex flex-col items-center justify-center z-50"
                            onClick={() => setSelected(null)}
                        >
                            <img
                                src={selected.file_path}
                                alt={selected.title}
                                className="max-h-[80%] max-w-[90%] rounded-lg shadow-lg"
                            />
                            <p className="mt-4 text-white text-lg">{selected.title}</p>
                        </div>
                    )}
                </div>
            </section>
        </GuestLayout>
    );
}
