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 CartDetail = dynamic(() => import('~/pages/shop/cart'));

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

      <IsAuth>
        <MobileView>
          <AppLayout title='Keranjang' withFooter={false}>
            <div className='p-4'>
              <CartDetail />
            </div>
          </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 className='h-10' />

              <CartDetail />
            </div>
          </BasicLayout>
        </DesktopView>
      </IsAuth>
    </>
  );
}