import propTypes from 'prop-types';
import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';
import { ArrowBackIcon, ChevronRightIcon } from '@chakra-ui/icons';
import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';

const Breadcrumb = ({ breadcrumbItems, ...restProps }) => {
  const navigate = useNavigate();

  return (
    <ChakraBreadcrumb
      colorScheme="primary"
      spacing="8px"
      separator={<ChevronRightIcon color="gray.500" />}
      my="5"
      {...restProps}
    >
      <BreadcrumbItem cursor="pointer">
        <ArrowBackIcon onClick={() => navigate(-1)} color="primary.500" />
      </BreadcrumbItem>
      {breadcrumbItems?.map((item, idx) => (
        <BreadcrumbItem key={idx} isCurrentPage={item.isCurrentPage}>
          <BreadcrumbLink color="primary.500" as={ReactRouterLink} to={item?.href || '#'}>
            {item.title}
          </BreadcrumbLink>
        </BreadcrumbItem>
      ))}
    </ChakraBreadcrumb>
  );
};

Breadcrumb.propTypes = {
  breadcrumbItems: propTypes.arrayOf(
    propTypes.shape({
      title: propTypes.string.isRequired,
      href: propTypes.string,
      isCurrentPage: propTypes.bool,
    }),
  ).isRequired,
  ...ChakraBreadcrumb.propTypes,
};

export default Breadcrumb;
