import { type PropsWithChildren } from 'react';

import { List as MuiList, useTheme } from '@mui/material';

import { type ListProps } from './types';

export const List = ({ id, sx, children }: PropsWithChildren<ListProps>) => {
  const theme = useTheme();

  return (
    <MuiList
      id={id}
      sx={{
        p: 0,
        backgroundColor: theme.palette.new.background.elements.default,
        ...sx,
      }}
    >
      {children}
    </MuiList>
  );
};

export type { ListProps };

export default List;