import { View, Text, TouchableOpacity, Modal } from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";

export default function MyModal({
  visible,
  setVisible,
  title,
  content,
  confirm,
}) {
  const tailwind = useTailwind();
  return (
    <Modal
      visible={visible}
      statusBarTranslucent
      transparent={true}
      style={tailwind("flex-1")}
    >
      <View
        style={{
          backgroundColor: "#00000080",
          ...tailwind("flex-1 items-center justify-center"),
        }}
      >
        <View
          style={tailwind("p-2 rounded-2xl bg-[#1E1C29] items-center w-3/4")}
        >
          <Text
            style={tailwind(
              "text-white text-xl font-semibold text-center mt-2"
            )}
          >
            {title}
          </Text>
          <Text
            style={tailwind("text-[#FFFFFF80] text-sm font-medium mt-2 mb-4")}
          >
            {content}
          </Text>
          <View style={tailwind("flex-row justify-around")}>
            <TouchableOpacity
              onPress={() => setVisible(false)}
              style={tailwind(
                "border-r-2 border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
              )}
            >
              <Text
                style={tailwind(
                  "text-[#FFFFFF80] text-base font-medium text-center"
                )}
              >
                取消
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={confirm}
              style={tailwind(
                "border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
              )}
            >
              <Text
                style={tailwind("text-white text-base font-medium text-center")}
              >
                确认
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
}