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

export default function OrderSummary() {
  const { t } = useTranslation();
  const subtotal = useAppSelector(selectCartTotal);
  const { isRTL } = useAppSelector((state) => state.locale);
  const tax = subtotal * 0.1; // 10% tax
  const total = subtotal + tax;

  return (
    <>
      <Card className={`${styles.orderSummary}`}>
        <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
        <Divider style={{ margin: "15px 0 15px 0" }} />
        <Space direction="vertical" style={{ width: "100%" }}>
          <div className={styles.summaryRow}>
            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
              {t("cart.basketTotal")}
            </ProText>
            <ArabicPrice 
              price={subtotal} 
              style={{ color: "rgba(67, 78, 92, 1)" }}
            />
          </div>
          <div className={styles.summaryRow}>
            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
              {t("cart.discount")}
            </ProText>
            <ArabicPrice 
              price={0} 
              style={{ color: "rgba(67, 78, 92, 1)" }}
            />
          </div>
          <div className={styles.summaryRow}>
            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
              {t("cart.riderTip")}
            </ProText>
            <ArabicPrice 
              price={tax} 
              style={{ color: "rgba(67, 78, 92, 1)" }}
            />
          </div>
          <Divider className={styles.summaryDivider} />
          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
            <ProText strong>{t("cart.totalAmount")}</ProText>
            <ArabicPrice 
              price={total} 
              strong
            />
          </div>
        </Space>
      </Card>
    </>
  );
}
