import { Card, Divider, Space } from "antd";
import ArabicPrice from "components/ArabicPrice";
import { Order } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import ProText from "../ProText";
import ProTitle from "../ProTitle";
import styles from "./PaymentDetails.module.css";

export default function PaymentDetails({ order }: { order?: Order }) {
  const { t } = useTranslation();

  return (
    <>
      <Card className={`${styles.orderSummary}`}>
        <ProTitle style={{ fontSize: 18 }}>{t("cart.paymentSummary")}</ProTitle>
        <Divider style={{ margin: "15px 0 15px 0" }} />
        <Space orientation="vertical" style={{ width: "100%" }}>
          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
            <ProText
              style={{
                fontWeight: 600,
                fontStyle: "SemiBold",
                fontSize: 16,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color: "#333333",
              }}
            >
              {t("cart.totalAmount")}
            </ProText>
            <ArabicPrice
              price={order?.total_price || 0}
              textStyle={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: 16,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color: "#434E5C",
              }}
            />
          </div>
        </Space>
      </Card>
    </>
  );
}
