import { NextPage } from 'next'
import withLayout from '@/hoc/withLayout'
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-20'>
            <div className='flex justify-between'>
                <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-sm'>فروشنده شوید</div>
            </div>

            <div className='flex gap-6 mt-14 flex-row-reverse'>
                <ShopInformation />
                <div className='flex-1 flex flex-col gap-6'>
                    <div className='flex gap-6'>
                        <ProductImage />
                        <BaseInformation />
                    </div>
                    <div>
                        <Specifications />
                        <Description />
                        <ProsCons />
                        <Reviews />
                        <Questions />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default withLayout(SingleProduct)