import type { IconButtonProps, LinkProps } from '@mui/material'
import {
  IconButton as MuiIconButton,
  List as MuiList,
  styled,
} from '@mui/material'
import type React from 'react'
import { ListItem as ListItemBase } from '../ListItem/ListItem.js'

export const ListItem: React.FC<
  React.ComponentProps<typeof ListItemBase> & IconButtonProps & LinkProps
> = styled(ListItemBase)(() => ({
  position: 'absolute',
  top: 0,
  left: 0,
}))

export const List: React.FC<
  React.ComponentProps<typeof MuiList> & IconButtonProps & LinkProps
> = styled(MuiList)(({ theme }) => ({
  cursor: 'pointer',
  marginLeft: theme.spacing(1.5),
  marginRight: theme.spacing(1.5),
}))

export const IconButton: React.FC<
  React.ComponentProps<typeof MuiIconButton> & IconButtonProps & LinkProps
> = styled(MuiIconButton)<IconButtonProps & LinkProps>(({ theme }) => ({
  lineHeight: 1,
  fontSize: 12,
  fontWeight: 400,
  padding: theme.spacing(0.375, 0.375),
  margin: theme.spacing(0, 0, 0, 0.25),
  color: 'inherit',
  backgroundColor: 'unset',
  minWidth: 'unset',
  borderRadius: theme.vars.shape.borderRadiusTertiary,
  '&:hover': {
    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
  },
  svg: {
    fontSize: 14,
  },
}))