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

import type { Theme } from '../types';

export const MuiButton = {
  styleOverrides: {
    root: ({ theme, ownerState }) => ({
      borderRadius: '12px',
      textTransform: 'none',
      variants: [
        {
          props: { variant: 'contained' },
          style: { color: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black },
        },
        {
          props: { variant: 'outlined' },
          style: {
            color: theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.primary.dark,
            borderColor: theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.primary.dark,
          },
        },
      ],
    }),
    sizeSmall: { padding: '6px 16px' },
    sizeMedium: { padding: '8px 20px' },
    sizeLarge: { padding: '11px 24px' },
    textSizeSmall: { padding: '7px 12px' },
    textSizeMedium: { padding: '9px 16px' },
    textSizeLarge: { padding: '12px 16px' },
  },
} satisfies Components<Theme>['MuiButton'];