import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import _ from 'lodash-contrib';
import Seo from '@/core/components/Seo';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
import Link from 'next/link';

const BasicLayout = dynamic(() =>
  import('@/core/components/layouts/BasicLayout')
);
const ProductSearch = dynamic(() =>
  import('@/lib/product/components/ProductSearch')
);

export default function Search() {
  const router = useRouter();

  return (
    <BasicLayout>
      <Seo title={`Cari produk ${router.query.q || ''} di Indoteknik.com`} />

      <div className='container mx-auto py-4 md:py-6 mb-3'>
        {router.query?.q && (
          <Breadcrumb>
            <BreadcrumbItem>
              <BreadcrumbLink
                as={Link}
                href='/'
                className='!text-danger-500 whitespace-nowrap'
              >
                Home
              </BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbItem isCurrentPage>
              <BreadcrumbLink className='whitespace-nowrap'>
                Cari: {router.query.q || ''}
              </BreadcrumbLink>
            </BreadcrumbItem>
          </Breadcrumb>
        )}
      </div>
      {!_.isEmpty(router.query) && (
        <ProductSearch query={router.query} prefixUrl='/shop/search' />
      )}
    </BasicLayout>
  );
}