import Seo from '@/core/components/Seo'
import BasicLayout from '@/core/components/layouts/BasicLayout'
import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import IsAuth from '@/lib/auth/components/IsAuth'
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
import dynamic from 'next/dynamic'
import Link from 'next/link'

const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout'))
const CartComponent = dynamic(() => import('@/lib/cart/components/Cart'))

export default function Cart() {
  return (
    <>
      <Seo title='Keranjang Belanja Indoteknik.com' />

      <IsAuth>
        <MobileView>
          <AppLayout title='Keranjang' withFooter={false}>
            <CartComponent />
          </AppLayout>
        </MobileView>

        <DesktopView>
          <BasicLayout>
            <div className='container mx-auto py-4 md:py-6 pb-0'>
              <Breadcrumb>
                <BreadcrumbItem>
                  <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
                    Home
                  </BreadcrumbLink>
                </BreadcrumbItem>

                <BreadcrumbItem isCurrentPage>
                  <BreadcrumbLink className='whitespace-nowrap'>Keranjang</BreadcrumbLink>
                </BreadcrumbItem>
              </Breadcrumb>
            </div>
            <CartComponent />
          </BasicLayout>
        </DesktopView>
      </IsAuth>
    </>
  )
}
