import { Breadcrumbs, Typography, Link as MuiLink } from '@mui/material';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import { Link } from 'react-router-dom';

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface Props {
  items: BreadcrumbItem[];
}

export const PageBreadcrumbs = ({ items }: Props) => {
  return (
    <Breadcrumbs
      separator={<NavigateNextIcon fontSize="small" />}
      sx={{ mb: 2, fontSize: '0.8125rem' }}
    >
      {items.map((item, index) => {
        const isLast = index === items.length - 1;
        if (isLast || !item.href) {
          return (
            <Typography key={index} variant="body2" color="text.primary" fontWeight={500}>
              {item.label}
            </Typography>
          );
        }
        return (
          <MuiLink
            key={index}
            component={Link}
            to={item.href}
            underline="hover"
            color="text.secondary"
            variant="body2"
          >
            {item.label}
          </MuiLink>
        );
      })}
    </Breadcrumbs>
  );
};
