import React from 'react';
import type { Theme } from '@mui/material';
import type { Components } from '@mui/material/styles';
import { KeyboardArrowDownRounded } from '@mui/icons-material';

export default function MuiAccordionSummary(theme: Theme): Components['MuiAccordionSummary'] {
  const borderColor = theme.palette.shades[300];

  return {
    defaultProps: {
      expandIcon: <KeyboardArrowDownRounded />,
    },
    styleOverrides: {
      root: {
        borderBottom: '1px solid transparent',
        padding: theme.spacing(2, 2, 2, 3),

        '&.Mui-expanded': {
          borderBottomColor: borderColor,
        },
      },
      content: {
        margin: 0,

        '&.Mui-expanded': {
          margin: 0,
        },
      },
      expandIconWrapper: {
        fontSize: 20,
      },
    },
  };
}
