import React from 'react';
import { Link } from 'react-router-dom';
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/system';

const BreadcrumbContainer = styled(Box)({
  display: 'flex',
  alignItems: 'center',
  fontSize: '0.8rem',
  color: '#0077C0', // Primary color
  '& a': {
    textDecoration: 'none',
    color: '#0077C0', // Primary color
    '&:hover': {
      textDecoration: 'underline',
    },
  },
});

const BreadcrumbSeparator = styled(Typography)({
  margin: '0 0.5rem',
});

const Breadcrumbs = () => {
  const pathnames = window.location.pathname.split('/').filter((x) => x);

  return (
    <BreadcrumbContainer>
      <Link to="/">Home</Link>
      {pathnames.map((value, index) => {
        const to = `/${pathnames.slice(0, index + 1).join('/')}`;
        const isLast = index === pathnames.length - 1;
        return (
          <React.Fragment key={to}>
            <BreadcrumbSeparator>/</BreadcrumbSeparator>
            {isLast ? (
              <Typography>{value}</Typography>
            ) : (
              <Link to={to}>{value}</Link>
            )}
          </React.Fragment>
        );
      })}
    </BreadcrumbContainer>
  );
};

export default Breadcrumbs;