import withLayout from '@/hoc/withLayout'
import { NextPage } from 'next'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import Filters from './components/Filters'
import Sorts from './components/Sorts'
import GridWrapper from '@/components/GridWrapper'
import ProductCard from '@/components/ProductCard'

const Products: NextPage = () => {
    return (
        <div className="mt-14 px-20">
            <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='mt-14 flex gap-6'>
                <Filters />
                <div className='flex-1'>
                    <Sorts />

                    <div className='mt-10'>
                        <GridWrapper desktop={4} mobile={1}>
                            <ProductCard />
                            <ProductCard />
                            <ProductCard />
                            <ProductCard />
                        </GridWrapper>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default withLayout(Products)