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

export const maxWidthMapping = {
  sm: 320,
  md: 400,
  lg: 480,
  xl: 640,
};

export default function MuiTooltip(theme: Theme): Components['MuiTooltip'] {
  const bg = theme.palette.info.light;

  return {
    defaultProps: {
      arrow: true,
      placement: 'top',
    },
    styleOverrides: {
      tooltip: ({ ownerState }) => {
        const key = (ownerState['max-width'] as keyof typeof maxWidthMapping) || 'sm';

        return {
          maxWidth: maxWidthMapping[key],
          fontSize: 12,
          lineHeight: 1.3,
          color: theme.palette.info.contrastText,
          backgroundColor: bg,
          borderRadius: theme.shape.borderRadiusSmall,
          boxShadow: theme.shadows[14],
        };
      },
      arrow: {
        '&:before': {
          backgroundColor: bg,
        },
      },
    },
  };
}
