import { NextPage } from 'next'
import Layout from '@/hoc/Layout'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import ProductImage from '@/app/product/components/ProductImage'
import BaseInformation from '@/app/product/components/BaseInformation'
import ShopInformation from '@/app/product/components/ShopInformation'
import Specifications from '@/app/product/components/Specifications'
import ProsCons from '@/app/product/components/ProsCons'
import Description from '@/app/product/components/Description'
import Reviews from '@/app/product/components/Reviews'
import Questions from '@/app/product/components/Questions'

const SingleProduct: NextPage = () => {
    return (
        <div className='mt-14 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20'>
            <div className='flex flex-col sm:flex-row justify-between gap-4 sm:gap-0'>
                <Breadcrumb aria-label="breadcrumb">
                    <BreadcrumbList className="text-sm text-muted-foreground">
                        <BreadcrumbItem>
                            <BreadcrumbLink href="/">فروشگاه آناهیتا</BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator className="text-muted-foreground select-none">/</BreadcrumbSeparator>
                        <BreadcrumbItem>
                            <BreadcrumbLink href="/products">بهداشت خانگی</BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbSeparator className="text-muted-foreground select-none">/</BreadcrumbSeparator>
                        <BreadcrumbItem>
                            <BreadcrumbPage className="text-foreground">مواد شوینده</BreadcrumbPage>
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>

                <div className='text-primary text-xs sm:text-sm'>فروشنده شوید</div>
            </div>

            <div className='flex flex-col xl:flex-row gap-4 sm:gap-6 mt-8 sm:mt-12 md:mt-14'>
                <div className='xl:w-[325px] xl:shrink-0'>
                    <ShopInformation />
                </div>
                <div className='flex-1 flex flex-col gap-6'>
                    <div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
                        <ProductImage />
                        <BaseInformation />
                    </div>
                    <div>
                        <Specifications />
                        <Description />
                        <ProsCons />
                        <Reviews />
                        <Questions />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default function SingleProductWithLayout() {
    return (
        <Layout>
            <SingleProduct />
        </Layout>
    )
}