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: "rgba(0,0,0,0.5)",
          ...tailwind("flex-1 items-center justify-center"),
        }}
      >
        <View style={tailwind("bg-white w-2/3 p-2 rounded-lg")}>
          <Text style={tailwind("text-base font-semibold  text-center p-2")}>
            {title}
          </Text>
          <Text style={tailwind("text-sm text-gray-400 text-center pb-2")}>
            {content}
          </Text>
          <View style={tailwind("flex-row justify-around")}>
            <TouchableOpacity
              onPress={() => setVisible(false)}
              style={tailwind(
                "border-r border-t border-gray-100 basis-1/2 pt-1 justify-center items-center"
              )}
            >
              <Text style={tailwind("text-base text-gray-400")}>取消</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={confirm}
              style={tailwind(
                "border-t border-gray-100 basis-1/2 pt-1 justify-center items-center"
              )}
            >
              <Text style={tailwind("text-base")}>确认</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
}
