import React from "react";
import { Modal, View, Text, TouchableOpacity, Platform } from "react-native";

interface PermissionAlertModalProps {
  visible: boolean;
  title: string;
  message: string;
  primaryText: string; // Right button (e.g. OK / Confirm)
  secondaryText: string; // Left button (e.g. Cancel)
  onPrimary: () => void;
  onSecondary: () => void;
  primaryVariant?: "primary" | "danger";
}

const PermissionAlertModal: React.FC<PermissionAlertModalProps> = ({
  visible,
  title,
  message,
  primaryText,
  secondaryText,
  onPrimary,
  onSecondary,
  primaryVariant = "primary",
}) => {
  const primaryBgClass =
    primaryVariant === "danger" ? "bg-red-500" : "bg-primary";
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onSecondary}
    >
      <View className="flex-1 items-center justify-center bg-black/30 px-6">
        <View className="w-full rounded-3xl bg-white shadow-xl px-6 pt-6 pb-5">
          {/* Title & message */}
          <Text className="text-xl font-dmsans-bold text-black mb-1">
            {title}
          </Text>
          <Text className="text-sm font-dmsans text-gray-600 leading-5 mb-5">
            {message}
          </Text>

          {/* Buttons row */}
          <View className="flex-row items-center justify-between mt-3 gap-3">
            {/* Secondary: outlined button */}
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={onSecondary}
              className="flex-1 py-2.5 rounded-xl border border-gray-300 bg-white items-center justify-center"
            >
              <Text className="text-sm font-dmsans text-gray-700">
                {secondaryText}
              </Text>
            </TouchableOpacity>

            {/* Primary: filled button */}
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={onPrimary}
              className={`flex-1 py-2.5 rounded-xl ${primaryBgClass} items-center justify-center`}
            >
              <Text className="text-sm font-dmsans text-white font-semibold">
                {primaryText}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};
export default PermissionAlertModal;