
import GuestLayout from "@/Layouts/GuestLayout";
import { Head } from "@inertiajs/react";
import { WEBSITE_TITLE } from "@/Config/Constant";
import BreadcrumbComponent from "@/Components/BreadcrumbComponent";
import { Carousel } from "flowbite-react";

export default function Community({ galleries }) {

    return (
        <GuestLayout>
            <Head title={`Coming soon - ${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">
                            Community</h2>
                        <BreadcrumbComponent links={
                            [
                                { 'title': 'Community', 'path': '#' },
                            ]
                        } />
                    </div>
                    {/* <div className="bg-white text-gray-600 d    ark:text-gray-200 p-4 rounded-lg shadow dark:bg-gray-800" dangerouslySetInnerHTML={{ __html: about.about }} ></div> */}
                    <div className="mt-10">
                        <div className="h-80 sm:h-96">
                            <Carousel>
                                {galleries?.map((item, index) => (
                                    <img key={index} src={item.file_path} alt={item.title} />
                                ))}
                            </Carousel>
                        </div>
                    </div>
                </div>
            </section>
        </GuestLayout>
    );
}
