import BottomSheetModal from "@/components/common/BottomSheetModal";
import { useTranslation } from "react-i18next";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

interface CancelPaymentProps {
  visible: boolean;
  onClose: () => void;
  onCancel: () => void;
}

export default function CancelPayment({
  visible,
  onClose,
  onCancel,
}: CancelPaymentProps) {
  const { t } = useTranslation();
  return (
    <BottomSheetModal
      visible={visible}
      onClose={onClose}
      heading={t("payment.cancel-payment")}
    >
      <View style={styles.row}>
        <Text>{t("payment.do-you-want-to-cancel-payment")}</Text>
      </View>
      <View style={styles.buttonsContainer}>
        <TouchableOpacity onPress={onCancel} style={styles.button}>
          <Text style={styles.bottomButtonText}>
            {t("payment.cancel-payment")}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={onClose} style={styles.button}>
          <Text style={styles.bottomButtonText}>
            {t("payment.continue-payment")}
          </Text>
        </TouchableOpacity>
      </View>
    </BottomSheetModal>
  );
}

const styles = StyleSheet.create({
  buttonsContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 8,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: "#D8DDE7",
  },
  bottomButtonText: {
    textAlign: "center",
  },
  button: {
    width: "45%",
    height: 44,
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderWidth: 1,
    borderColor: "#E5E9F0",
    borderRadius: 4,
    backgroundColor: "#F3F5F8",
  },
  row: {
    flexDirection: "row",
    gap: 16,
    justifyContent: "space-between",
  },
  secondaryButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 8,
    paddingHorizontal: 16,
    height: 40,
    borderRadius: 4,
    backgroundColor: "#F3F5F8",
    borderWidth: 1,
    borderColor: "#D8DDE7",
    width: 156,
    gap: 8,
  },
  fullButton: {
    width: "100%",
  },
  buttonText: {
    fontSize: 14,
    fontWeight: "500",
    color: "#252A34",
  },
});