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

export default function MuiFab(theme: Theme): Components['MuiFab'] {
  return {
    defaultProps: {
      color: 'primary',
    },
    styleOverrides: {
      sizeSmall: {
        [`& .${svgIconClasses.root}`]: {
          fontSize: 18,
        },
      },
      sizeMedium: {
        [`& .${svgIconClasses.root}`]: {
          fontSize: 20,
        },
      },
      sizeLarge: {
        [`& .${svgIconClasses.root}`]: {
          fontSize: 24,
        },
      },
      neutral: {
        color: theme.palette.shades[900],
        backgroundColor: theme.palette.shades[300],

        '&:hover': {
          backgroundColor: theme.palette.shades[400],
        },
      },
    },
  };
}
