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

export default function About({ user, about, aboutArticles }) {
    const [isOpen, setIsOpen] = useState(false);
    console.log(aboutArticles);
    
    return (
        <GuestLayout user={user} cartOpen={isOpen} setCartOpen={setIsOpen}>
            <Head title={`About - ${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">
                            About us</h2>
                        <BreadcrumbComponent links={
                            [
                                { 'title': 'About us', '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">
                        {aboutArticles?.map((item, index) => (
                            <div className="my-3">
                                <h3 className="text-2xl">{item.title}</h3>
                                <div className="text-gray-600 dark:text-gray-200 p-4" dangerouslySetInnerHTML={{ __html: item.content }} ></div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </GuestLayout>
    );
}
