import { Button, IconButton, Menu, MenuItem, styled } from '@mui/material'

export const StyledIconButton = styled(IconButton, {
  shouldForwardProp: (prop) => prop !== 'outlined',
})<{ outlined?: boolean; size: 'small' | 'regular' }>(
  ({ theme, outlined, size }) => ({
    ...(outlined && {
      border: `1px solid ${theme.palette.primary.main}`,
      borderRadius: '5px',
      height: '40px',
      width: '40px',
      ...(size === 'small' && {}),
    }),
  }),
)

export const StyledMenuItem = styled(MenuItem)(({}) => ({
  display: 'flex',
  alignItems: 'center',
  height: '60px',
  '& .MuiListItemIcon-root': {
    minWidth: '24px',
  },
  '& .MuiSvgIcon-root': {
    height: '18px',
    width: '18px',
  },
}))

export const StyledDropDownButton = styled(Button)(({}) => ({
  padding: '0 15px',
  minWidth: '180px',
  justifyContent: 'space-between',
}))

export const StyledMenu = styled(Menu)(({ theme }) => ({
  '& .MuiPaper-root': {
    borderRadius: '10px',
    border: '1px solid #1212121A',
    marginTop: '10px',
    boxShadow: '0px 4px 16px #0000000F',
  },
  '& .MuiList-root': {
    minWidth: '240px',
    padding: 0,
    '& li': {
      borderBottom: theme.borders.grayLight,
      ':hover': {
        backgroundColor: 'rgba(0, 0, 0, 0.025)',
      },
    },
    '& > :last-child': {
      borderBottom: 'none',
      '& li': {
        borderBottom: 'none',
      },
    },
  },
}))
