import { CheckCircleFilled } from "@ant-design/icons";
import { Modal } from "antd";
import { motion } from "framer-motion";
import React from "react";
import styles from "./Modal.module.css";
import Button from "../Button/Button";

interface Props {
  open: boolean;
  onClose: () => void;
}

const Modalka: React.FC<Props> = ({ open, onClose }) => {
  return (
    <Modal
      open={open}
      footer={null}
      onCancel={onClose}
      centered
      width={460}
      rootClassName={styles.modalRoot}
    >
      <motion.div
        initial={{ opacity: 0, y: 28, scale: 0.96 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        transition={{ duration: 0.35, ease: "easeOut" }}
        className={styles.modalBox}
      >
        <div className={styles.iconWrap}>
          <CheckCircleFilled className={styles.icon} />
        </div>

        <p className={styles.title}>Спасибо за обращение!</p>
        <p className={styles.subtitle}>
          Мы свяжемся с вами в ближайшее время. Хорошего дня!
        </p>

        <Button onClick={onClose} label="Хорошо"/>
      </motion.div>
    </Modal>
  );
};

export default Modalka;