import React from 'react';
import { useStyles } from './styles/customBreadcrumbsStyles';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import { Breadcrumbs } from '@mui/material';
import { Link } from 'react-router-dom';

function CustomBreadcrumbs({ breadcrumbs }) {
  const classes = useStyles();
  const crums = [...breadcrumbs];
  return (
    <Breadcrumbs
      className={classes.root}
      separator={<NavigateNextIcon className={classes.sepreaterBreadCrumb} />}
    >
      {crums.map((breadcrumb, index) => (
        <Link
          key={breadcrumb.path}
          to={{
            pathname: breadcrumb.path,
            search: breadcrumb.query
              ? `?${new URLSearchParams(breadcrumb.query).toString()}`
              : '',
          }}
          className={
            index === breadcrumbs.length - 1
              ? classes.activeBreadCrumb
              : classes.inActiveBreadCrumb
          }
        >
          {breadcrumb.label}
        </Link>
      ))}
    </Breadcrumbs>
  );
}

export default CustomBreadcrumbs;
