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

import { SHAPE_ROUNDED, SHAPE_SQUARE } from '@/mui/constants';

export default function MuiBadge(theme: Theme): Components['MuiBadge'] {
  return {
    defaultProps: {
      color: 'primary',
    },
    variants: [
      {
        props: { shape: SHAPE_SQUARE },
        style: {
          [`& .${badgeClasses.badge}`]: {
            borderRadius: 0,
          },
        },
      },
      {
        props: { shape: SHAPE_ROUNDED },
        style: {
          [`& .${badgeClasses.badge}`]: {
            borderRadius: theme.shape.borderRadiusSmall,
          },
        },
      },
    ],
    styleOverrides: {
      badge: {
        fontWeight: 400,
        fontSize: theme.typography.body2.fontSize,
      },
      standard: {
        minWidth: 18,
        height: 18,
        paddingLeft: theme.spacing(1),
        paddingRight: theme.spacing(1),
      },
      dot: {
        width: 10,
        height: 10,
        borderRadius: '50%',
      },
      colorNeutral: {
        color: theme.palette.shades[900],
        backgroundColor: theme.palette.shades[300],
      },
    },
  };
}
