
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 { Card } from "flowbite-react";
import { useState } from "react";

export default function SingleBlog({user, blog, blogs }) {
    const [isOpen, setIsOpen] = useState(false);
    blog = blog.data;

    return (
        <GuestLayout user={user} cartOpen={isOpen} setCartOpen={setIsOpen}>
            <Head title={`${blog.title} - ${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">
                            {blog.title}</h2>
                        <BreadcrumbComponent links={
                            [
                                { 'title': 'Blogs', 'path': route('public.blogs') },
                                { 'title': `${blog.title}`, 'path': '#' },
                            ]
                        } />
                    </div>
                    <div className="flex flex-wrap md:flex-nowrap gap-2">

                        <div className="w-full md:w-3/4">
                            <Card
                                className="w-full"
                                imgAlt={blog.title}
                                imgSrc={blog.file_path}
                            >
                                <i className="text-gray-400">{blog.ago}</i>
                                <a href="#">
                                    <h5 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
                                        {blog.title}
                                    </h5>
                                </a>
                                <div className="text-gray-600 dark:text-gray-200 p-4" dangerouslySetInnerHTML={{ __html: blog.details }} ></div>
                            </Card>
                        </div>
                        <div className="w-full md:w-1/4 bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 p-8 rounded-lg shadow-lg max-w-lg mx-auto">
                            <h2 className="text-2xl font-bold mb-4">Letest blogs</h2>
                            {blogs?.data?.map((item, index) => (
                                <div key={index} className="my-3">
                                    <ImageBlog blog={item} hideDesc={true}  route={route('public.single-blog', item.id)}/>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>
        </GuestLayout>
    );
}
