import React from "react";
import { Modal, Text, View } from "react-native";
import CreateLyricsHeader from "../../screens/Writing/components/CreateLyricsHeader";
import { gutters, Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradientButton from "../BorderGradientButton";
import GradientButton from "../GradientButton";

const ValidateModal = ({ visible, onClose, onPressValidate }) => {
  return (
    <Modal
      animationType="slide"
      visible={visible}
      transparent={true}
      onRequestClose={onClose}
    >
      <View
        style={{
          flex: 1,
          justifyContent: "flex-end",
          paddingBottom: gutters * 1.5,
          paddingHorizontal: gutters,
        }}
      >
        <CreateLyricsHeader>
          <View style={{ gap: 30 }}>
            <View style={{ gap: 15 }}>
              <View
                style={{ paddingHorizontal: 15, gap: 2, alignItems: "center" }}
              >
                <Text
                  style={{
                    fontSize: 22,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterSemiBold,
                    textAlign: "center",
                  }}
                >
                  Attention !
                </Text>
                <Text
                  style={{
                    fontSize: 16,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                    textAlign: "center",
                  }}
                >
                  Lorsque tu clique sur valider, tu ne pourra plus changer ni le
                  texte ni la mélodie.
                </Text>
              </View>
            </View>
            <View style={{ width: "85%", alignSelf: "center", gap: 15 }}>
              <BorderGradientButton title="Retour" onPress={onClose} />
              <GradientButton
                title="Valider"
                onPress={() => {
                  onClose();
                  onPressValidate?.();
                }}
              />
            </View>
          </View>
        </CreateLyricsHeader>
      </View>
    </Modal>
  );
};

export default ValidateModal;