import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from 'next/link';

export default function BasicBreadcrumbs(props: {
  items: { id: string; path?: string; label: string }[];
}) {
  return (
    <Box
      role="presentation"
      sx={{
        paddingTop: {
          xs: 0,
          md: '1rem',
        },
        paddingBottom: {
          xs: 0,
          md: '1rem',
        },
      }}
    >
      <Breadcrumbs aria-label="breadcrumb">
        {props.items.map((item, index) => {
          return item?.path ? (
            <Link key={item.id} href={item.path}>
              <Typography color="inherit">{item.label}</Typography>
            </Link>
          ) : (
            <Typography key={item.id} color="text.primary">
              {item.label}
            </Typography>
          );
        })}
      </Breadcrumbs>
    </Box>
  );
}