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'>
        {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>
  )
}