import React, { ComponentProps, forwardRef } from 'react';
import { List as MuiList, listItemClasses } from '@mui/material';
import { useTheme } from '@mui/material/styles';

type Props = ComponentProps<typeof MuiList> & {
  listStyle?: 'initial' | 'decimal' | 'square';
};

const List = forwardRef<HTMLUListElement, Props>(({ listStyle, sx, ...rest }, ref) => {
  const theme = useTheme();

  return (
    <MuiList
      ref={ref}
      {...rest}
      sx={{
        ...(listStyle && {
          listStyle,
          paddingLeft: theme.spacing(4),
          [`& .${listItemClasses.root}`]: {
            display: 'list-item',
            paddingLeft: theme.spacing(1),
          },
        }),
        ...sx,
      }}
    />
  );
});

List.displayName = 'List';

export default List;
