import React from "react"
import {
  HomeButton,
  ModalBody,
  ModalFooter,
  ModalHeader,
  ModalHeaderIcon,
  ModalHeaderTitle,
  ModalStyled,
  ModalWrapper,
  OfferFollowingButton,
  Overlay,
} from "./paymentSucceed.styled"

interface PaymentSucceedModalProps {
  setShowModal: (isShow: boolean) => void
}

const PaymentSucceedModal = (props: PaymentSucceedModalProps) => {
  return (
    <ModalWrapper>
      <ModalStyled>
        <ModalHeader>
          <ModalHeaderIcon className="far fa-check-square fa-3x"></ModalHeaderIcon>
          <ModalHeaderTitle>
            THANH TOÁN <br />
            HOÀN TẤT
          </ModalHeaderTitle>
        </ModalHeader>
        <ModalBody>
          <p>Đơn hàng #246549876498 đã được đặt thành công.</p>
          <br />
          <br />
          <p>Cảm ơn bạn đã mua hàng tại ThuocSi.vn</p>
        </ModalBody>
        <ModalFooter className="modal-footer ">
          <HomeButton onClick={() => props.setShowModal(false)}>
            TRỞ VỀ TRANG CHỦ
          </HomeButton>
          <OfferFollowingButton onClick={() => console.log(`follow order`)}>
            THEO DÕI ĐƠN HÀNG
          </OfferFollowingButton>
        </ModalFooter>
      </ModalStyled>
      <Overlay/>
    </ModalWrapper>
  )
}

export default PaymentSucceedModal