import 'core-js/modules/es.object.assign.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { styled, Box, Typography, Divider } from '@mui/material';
import { Button } from '../../atom/Button/Button.js';
import { IconFont } from '../../atom/IconFont/IconFont.js';

const InfoModal = ({
  iconFontName,
  title,
  contents,
  buttonTitle,
  onCancel,
  onClick
}) => {
  return jsxs(StyledContainer, {
    children: [jsxs(StyledTopContent, {
      children: [iconFontName && jsx(IconFont, {
        name: iconFontName,
        fontSize: 20
      }), jsx(Typography, Object.assign({
        variant: "subtitle1",
        align: "left"
      }, {
        children: title
      }))]
    }), jsx(Divider, {}), jsx(StyledMainContent, {
      children: contents
    }), jsxs(StyledButtonContent, {
      children: [onCancel != null && jsx(Button, Object.assign({
        variant: "text",
        onClick: onCancel
      }, {
        children: "Cancel"
      })), buttonTitle != null && onClick != null && jsx(Button, Object.assign({
        variant: "outlined",
        onClick: onClick
      }, {
        children: buttonTitle
      }))]
    })]
  });
};
const StyledContainer = styled(Box)(({
  theme
}) => ({
  display: 'flex',
  flexDirection: 'column',
  background: 'black',
  width: '100%',
  border: '1px solid #767676',
  borderRadius: '0.5rem',
  maxHeight: '100vh',
  overflow: 'auto',
  // Hide the scrollbar for webkit-based browsers (Chrome, Safari, Edge)
  '&::-webkit-scrollbar': {
    display: 'none'
  },
  // Hide the scrollbar for Firefox
  scrollbarWidth: 'none',
  '-ms-overflow-style': 'none',
  [theme.breakpoints.up('md')]: {
    width: '648px'
  }
}));
const StyledTopContent = styled(Box)({
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  gap: '0.5rem',
  padding: '2rem'
});
const StyledMainContent = styled(Box)({
  display: 'flex',
  flexDirection: 'column',
  padding: '2rem'
});
const StyledButtonContent = styled(Box)({
  display: 'flex',
  flexDirection: 'row',
  paddingInline: '2rem',
  paddingBottom: '2rem',
  alignSelf: 'flex-end',
  gap: '1rem'
});

export { InfoModal as default };
