import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
import Link from 'next/link'
import React from 'react'

/**
 * Renders a breadcrumb component with links to navigate through different pages.
 *
 * @param {Object} props - The props object containing the brand name.
 * @param {string} props.brandName - The name of the brand to display in the breadcrumb.
 * @return {JSX.Element} The rendered breadcrumb component.
 */
const Breadcrumb = ({ brandName }) => {
  return (
    <div className='container mx-auto py-4 md:py-6'>
      <ChakraBreadcrumb>
        <BreadcrumbItem>
          <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
            Shop
          </BreadcrumbLink>
        </BreadcrumbItem>

        {/* <BreadcrumbItem>
          <BreadcrumbLink
            as={Link}
            href='/shop/promo'
            className='!text-danger-500 whitespace-nowrap'
          >
            Promo
          </BreadcrumbLink>
        </BreadcrumbItem> */}

        <BreadcrumbItem isCurrentPage>
          <BreadcrumbLink className='whitespace-nowrap'>{brandName}</BreadcrumbLink>
        </BreadcrumbItem>
      </ChakraBreadcrumb>
    </div>
  )
}

export default Breadcrumb