import { Children, type ReactNode } from 'react';

import {
  List as BaseList,
  type ListProps as BaseListProps,
  Divider,
  type DividerProps,
} from '@mui/material';

type ListWithDividerProps = BaseListProps & {
  items: ReactNode[];
  dividerProps?: DividerProps;
};

const ListWithDivider = ({
  items,
  dividerProps,
  ...other
}: ListWithDividerProps) => {
  return (
    <BaseList {...other}>
      {Children.map(items, item => (
        <>
          {item}
          <Divider
            variant="middle"
            {...dividerProps}
            sx={{
              '&:last-of-type': { visibility: 'hidden' },
              ...dividerProps?.sx,
            }}
          />
        </>
      ))}
    </BaseList>
  );
};

export default ListWithDivider;