import {
  listItemButtonClasses,
  ListItemButton as MuiListItemButton,
  styled,
} from '@mui/material'
import type React from 'react'

export const ListItemButton: React.FC<
  React.ComponentProps<typeof MuiListItemButton>
> = styled(MuiListItemButton)(({ theme }) => {
  return {
    borderRadius: theme.vars.shape.borderRadius,
    paddingLeft: theme.spacing(1.5),
    height: 56,
    '&:hover': {
      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
    },
    [`&.${listItemButtonClasses.selected}`]: {
      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
      '&:hover': {
        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,
      },
      ...theme.applyStyles('dark', {
        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
        '&:hover': {
          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
        },
      }),
    },
    variants: [
      {
        props: ({ disabled }) => disabled,
        style: {
          opacity: 0.5,
          cursor: 'auto',
          '&:hover': {
            backgroundColor: 'none',
          },
        },
      },
    ],
  }
})
