import { Button, Col, Row } from "antd";
import Modal from "components/Modal";
import React, { useCallback } from "react";
import { Text } from "components/Typography";

interface IProps {
  show: boolean;
  title: string;
  description: string;
  cancelLabel: string;
  confirmLabel: string;
  toggleModal(show: boolean): void;
  handleConfirm(): void;
}

const ProductDeleteConfirmModal = ({
  show,
  title,
  description,
  cancelLabel,
  confirmLabel,
  toggleModal,
  handleConfirm,
}: IProps) => {
  const handleSubmit = useCallback(() => {
    handleConfirm();
  }, [handleConfirm]);

  return (
    <Modal
      closable={false}
      centered
      className="product-delete-confirm-modal border-radius-modal"
      visible={show}
      onCancel={() => toggleModal(false)}
    >
      <Row justify="start">
        <Text preset="semibold18">{title}</Text>
      </Row>
      <Row justify="start" className="m__t--24">
        <Text preset="regular16" className="font__size--medium">
          {description}
        </Text>
      </Row>
      <Row
        align="middle"
        justify="center"
        gutter={[16, 16]}
        className="m__t--24"
      >
        <Col xs={24} md={12} lg={12}>
          <Button
            className="font__size--medium"
            type="primary"
            size="large"
            onClick={() => toggleModal(false)}
            block
          >
            {cancelLabel}
          </Button>
        </Col>
        <Col xs={24} md={12} lg={12}>
          <Button size="large" onClick={handleSubmit} block>
            {confirmLabel}
          </Button>
        </Col>
      </Row>
    </Modal>
  );
};

export default ProductDeleteConfirmModal;
