import { type BreadcrumbLink } from '@design-system/Breadcrumbs/types';
import { Link, Paper, Popper, Typography } from '@mui/material';

type CollapsedItemsPopperProps = {
  id: string | undefined;
  open: boolean;
  anchorEl: HTMLElement | null;
  collapsedLinks: BreadcrumbLink[];
};

export const CollapsedItemsPopper = ({
  id,
  open,
  anchorEl,
  collapsedLinks,
}: CollapsedItemsPopperProps) => {
  return (
    <Popper
      id={id}
      open={open}
      anchorEl={anchorEl}
    >
      <Paper
        sx={{
          mt: 1,
          maxWidth: 200,
          display: 'flex',
          flexDirection: 'column',
        }}
        elevation={2}
      >
        {collapsedLinks.map((link, index) => (
          <Link
            key={index}
            href={link.href}
            sx={{
              p: 1,
              ':hover': {
                backgroundColor: theme =>
                  theme.palette.new.action.background.neutral.hover,
              },
              textDecoration: 'none',
              color: 'inherit',
            }}
          >
            <Typography
              variant="globalS"
              fontWeight={600}
            >
              {link.title}
            </Typography>
          </Link>
        ))}
      </Paper>
    </Popper>
  );
};
