import React from "react";
import "./index.css";
import { Image, Tag } from "antd";

/**
 * Represents the PaymentCard component
 * @module Profile/PaymentHistory/PaymentCard
 * @param data {Object} Payment data
 * @return {JSX.Element}
 */
const PaymentCard = ({ data }) => {
    /**
     * Function that returns the status tag
     * @function getStatusTag
     * @param status {String} Status of the payment
     * @return {JSX.Element}
     */
  const getStatusTag = (status) => {
    switch (status) {
      case "PAID":
        return (
          <Tag color="green" className="text-sm p-1">
            Payment successful
          </Tag>
        );
      case "FAILED":
        return (
          <Tag color="red" className="text-sm p-1">
            Failed
          </Tag>
        );
      default:
        return (
          <Tag color="gold" className=" text-sm p-1">
            Unpaid
          </Tag>
        );
    }
  };
  return (
    <div className="payment_card mb-2">
      <div className="payment_card_item flex justify-between">
        <div className="payment_status_ mb-2">{getStatusTag(data?.status)}</div>
        <div className="payment_date_container text-secondary">
          <b>Date: {data?.date || ""}</b>
        </div>
      </div>
      <div className="payment_card_item payment_card_item_border mb-1">
        {data?.image ? (
          <Image src={data?.image} alt="" height={70} width={70} />
        ) : (
          ""
        )}
      </div>
      <div className="payment_card_item payment_card_item_border flex justify-between">
        <b>Payment Amount</b>
        <div>{data?.amount || 0}</div>
      </div>
      <div className="payment_card_item payment_card_item_border text-sm mt-4 mb-3">
        Remarks: {data?.remarks || ""}
      </div>
    </div>
  );
};

export default PaymentCard;