import type { Theme } from '@mui/material';
import { dialogContentClasses, dialogTitleClasses, iconButtonClasses } from '@mui/material';
import type { Components } from '@mui/material/styles';

export default function MuiDialogTitle(theme: Theme): Components['MuiDialogTitle'] {
  return {
    defaultProps: {
      variant: 'subtitle1',
      color: 'text.primary',
    },
    styleOverrides: {
      root: {
        wordBreak: 'break-word',
        position: 'relative',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: theme.spacing(1),
        padding: theme.spacing(2, 11),
        backgroundColor: theme.palette.shades[200],
        borderTopLeftRadius: theme.shape.borderRadius,
        borderTopRightRadius: theme.shape.borderRadius,

        [`& .${iconButtonClasses.root}`]: {
          position: 'absolute',
          top: 0,
          right: theme.spacing(1),
          zIndex: 1,
          ...(theme.direction === 'rtl' && {
            right: 'auto',
            left: theme.spacing(1),
          }),
        },

        [`&.${dialogTitleClasses.root} +.${dialogContentClasses.root}`]: {
          paddingTop: theme.spacing(4),
        },
      },
    },
  };
}
