import React, { ReactElement } from 'react';

import { WarningRounded, CheckCircleRounded, InfoRounded } from '@mui/icons-material';

import * as S from './StatusModal.style';
import { Button } from '../Button';
import { OnAction } from '@/types';

interface ModalStatusProps {
  title: string;
  text: string | ReactElement;
  type: 'success' | 'info' | 'warning';
  actions: OnAction[];
  w?: string;
}

export const ModalStatus = (props: ModalStatusProps) => {
  const { title, text, type, actions, w } = props;

  const iconBgColor = {
    warning: '#FFDB9F',
    info: '#D9FCFE',
    success: '#C9F5CB',
  };

  return (
    <S.Container>
      <S.Modal $w={w}>
        <S.ModalHeader>
          <S.ModalIcon $bg={iconBgColor[type]}>
            {type === 'warning' && <WarningRounded sx={{ fill: '#B74608' }} />}
            {type === 'info' && <InfoRounded sx={{ fill: '#154F8C' }} />}
            {type === 'success' && <CheckCircleRounded sx={{ fill: '#2E7D32' }} />}
          </S.ModalIcon>
          <S.ModalTitle>{title}</S.ModalTitle>
        </S.ModalHeader>
        <S.ModalBody>
          <S.ModalText>{text}</S.ModalText>
        </S.ModalBody>
        <S.ModalFooter>
          {actions.map((action, key) => {
            return (
              <Button
                key={key}
                color={action.color || 'primary'}
                variant={action.variant || 'contained'}
                disabled={action.disabled}
                onClick={action.action}
              >
                {action.label}
              </Button>
            );
          })}
        </S.ModalFooter>
      </S.Modal>
    </S.Container>
  );
};