import { touchRippleClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';

import {
  iconSizeLarge,
  iconSizeMedium,
  iconSizeSmall,
  iconSizeXSmall,
  largeSize,
  mediumSize,
  smallSize,
  xSmallSize,
} from '@/mui/components/constants';

export default function MuiIconButton(): Components['MuiIconButton'] {
  return {
    defaultProps: {
      color: 'neutral',
    },
    variants: [
      {
        props: { readOnly: true },
        style: {
          '&:hover': {
            backgroundColor: 'transparent',
            cursor: 'default',
          },
          [`& .${touchRippleClasses.root}`]: {
            opacity: 0,
            visibility: 'hidden',
          },
        },
      },
    ],
    styleOverrides: {
      root: {
        padding: 0,
      },
      sizeLarge: {
        fontSize: iconSizeLarge,
        width: largeSize,
        height: largeSize,
      },
      sizeMedium: {
        fontSize: iconSizeMedium,
        width: mediumSize,
        height: mediumSize,
      },
      sizeSmall: {
        fontSize: iconSizeSmall,
        width: smallSize,
        height: smallSize,
      },
      sizeXSmall: {
        fontSize: iconSizeXSmall,
        width: xSmallSize,
        height: xSmallSize,
      },
    },
  };
}
