import React from "react";
import "./Payment_Summary.css";
import { Table } from "react-bootstrap";

function Payment_Summary({ order }) {
  return (
    <>
      <section className="Payment_Summary mt-3">
        <div className="Order_summery_table">
          <div className="table-responsive">
            <Table className="">
              <thead>
                <tr>
                  <th colSpan={2} className="">Payment Summary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>SubTotal:</td>
                  <td className="text-end">
                    ₹ {Number(order?.total_selling_price).toFixed(2)}
                  </td>
                </tr>
                <tr>
                  <td>Coupon Discount :</td>
                  <td className="text-end">
                    -₹ {order?.total_coupon_discount || order?.coupon_discount}
                  </td>
                </tr>
                <tr>
                  <td>Payment Method :</td>
                  <td className="text-end">
                    {order?.Payment_Method?.name ||
                      order?.Product_Order?.Payment_Method?.name}
                  </td>
                </tr>
                <tr>
                  <td>Shipping :</td>
                  <td className="text-end">
                    {Number(order?.delivery_charges) === 0
                      ? "Free"
                      : Number(order?.delivery_charges).toFixed(2)}
                  </td>
                </tr>
                {/* <tr>
                  <td>Tax :</td>
                  <td className="text-end">{Number(order?.total_tax).toFixed(2)}</td>
                </tr>{" "} */}
                <tr className="total_tr_holder">
                  <td>
                    <b className="para_secondary_text">Total Amount :</b>
                  </td>
                  <td className="text-end">
                    <b className="">₹ {Number(order?.total_amount).toFixed(2)}</b>
                  </td>
                </tr>
              </tbody>
            </Table>
          </div>
        </div>
      </section>
    </>
  );
}

export default Payment_Summary;
