import { tabClasses, tabsClasses, Theme } from '@mui/material';
import type { Components } from '@mui/material/styles';

import { SIZE_SMALL } from '@/mui/constants';

export default function MuiTabs(theme: Theme): Components['MuiTabs'] {
  return {
    defaultProps: {
      variant: 'scrollable',
      scrollButtons: true,
    },
    styleOverrides: {
      root: {
        borderBottom: '1px solid',
        borderColor: theme.palette.divider,
        minHeight: 'auto',
        maxHeight: '100%',
      },
    },
    variants: [
      {
        props: { equalWidth: true },
        style: {
          [`& .${tabsClasses.list}`]: {
            display: 'inline-grid',
            gridAutoFlow: 'column',
            gridAutoColumns: '1fr',

            [`& .${tabClasses.root}`]: {
              minWidth: 'max-content',
            },
          },
        },
      },
      {
        props: { size: SIZE_SMALL },
        style: {
          [`& .${tabClasses.root}`]: {
            minHeight: '44px',
            minWidth: '44px',
            fontSize: 12,
            lineHeight: 1.66,

            [`& .${tabClasses.icon}`]: {
              fontSize: 16,
            },
          },
        },
      },
    ],
  };
}
