import { Card, Divider, Space } from "antd";
import ArabicPrice from "components/ArabicPrice";
import ProText from "components/ProText";
import { selectCart, selectCartTotal } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "../SplitBillPage.module.css";

export default function PaymentSummary() {
  const { t } = useTranslation();
  const { tmp } = useAppSelector(selectCart);
  const getTotal = useAppSelector(selectCartTotal);
  const { isRTL } = useAppSelector((state) => state.locale);

  const subtotal = getTotal;
  const tax = subtotal * 0.1; // 10% tax
  const total = subtotal + tax;

  const costPerPerson = total / (tmp?.totalPeople || 1);
  const remainingAmount = total - (tmp?.payFor || 1) * costPerPerson;

  return (
    <Card className={`${styles.orderSummary}`}>
      <Space direction="vertical" style={{ width: "100%" }}>
        <div className={styles.summaryRow}>
          <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
            {t("checkout.remainingAmount")}
          </ProText>
          <ArabicPrice 
            price={remainingAmount} 
            style={{ color: "rgba(67, 78, 92, 1)" }}
          />
        </div>

        <Divider className={styles.summaryDivider} />
        <div className={`${styles.summaryRow} ${styles.totalRow}`}>
          <ProText strong>{t("checkout.totalAmount")}</ProText>
          <ArabicPrice 
            price={total} 
            strong
          />
        </div>
      </Space>
    </Card>
  );
}
