web-menu-react-version/src/pages/order/components/SplitBillParticipantsBottomSheet.tsx

import { Button } from "antd";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useTranslation } from "react-i18next";

import ProText from "components/ProText";
import ArabicPrice from "components/ArabicPrice";
import styles from "../order.module.css";

interface SplitBillParticipantsBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

export function SplitBillParticipantsBottomSheet({
  isOpen,
  onClose,
}: SplitBillParticipantsBottomSheetProps) {
  const { t } = useTranslation();

  const taxesChargesStyle = {
    fontWeight: 400,
    fontStyle: "Regular",
    fontSize: 12,
    lineHeight: "140%",
    letterSpacing: "0%",
    color: "#777580",
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      title={t("order.whosPaidTheirShareSplitBill")}
      showCloseButton={true}
      initialSnap={1}
      height={285}
      snapPoints={[285]}
      contentStyle={{
        padding: 0,
      }}
    >
      <div
        style={{
          padding: "20px",
          display: "flex",
          flexDirection: "column",
          gap: 20,
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            placeItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "flex-start",
              placeItems: "center",
              gap: 10,
            }}
          >
            <Button
              shape="circle"
              iconPlacement="start"
              size="small"
              className={styles.addButton}
              style={{
                background: "#F9F9FA",
                width: 28,
                height: 28,
                border: "none",
                color: "#FFB700",
              }}
            >
              <ProText style={{ color: "#1F1C2E" }}> 1 </ProText>
            </Button>

            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#777580",
              }}
            >
              {t("order.personHasPaid")}
            </ProText>
          </div>

          <ArabicPrice
            price={0}
            textStyle={{
              fontWeight: 400,
              fontStyle: "Regular",
              fontSize: 12,
              lineHeight: "140%",
              letterSpacing: "0%",
              color: "#3D3B4A",
            }}
          />
        </div>
      </div>

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          backgroundColor: "var(--background)",
          padding: "20px",
          opacity: 1,
          gap: 8,
          borderTopLeftRadius: 24,
          borderTopRightRadius: 24,
          paddingTop: 12,
          paddingRight: 24,
          paddingBottom: 24,
          paddingLeft: 24,
        }}
      >
        <div className={styles.summaryRow}>
          <ProText style={taxesChargesStyle}>
            {t("splitBill.totalBill")}
          </ProText>
          <ArabicPrice price={0} textStyle={taxesChargesStyle} />
        </div>
        <div className={styles.summaryRow}>
          <ProText style={taxesChargesStyle}>
            {t("splitBill.serviceFee")}
          </ProText>
          <ArabicPrice price={0} textStyle={taxesChargesStyle} />
        </div>
        <div className={styles.summaryRow}>
          <ProText
            style={{
              fontWeight: 400,
              fontStyle: "Regular",
              fontSize: 14,
              lineHeight: "140%",
              letterSpacing: "0%",
            }}
          >
            {t("splitBill.remainingToPay")}
          </ProText>
          <ArabicPrice price={0} textStyle={taxesChargesStyle} />
        </div>
        <ProText style={taxesChargesStyle}>
          {t("splitBill.includesAllOfTaxesCharges")}
        </ProText>
      </div>
    </ProBottomSheet>
  );
}