import { View, Text } from "react-native";
import React from "react";
import { SheetManager } from "react-native-actions-sheet";
import { Palette } from "../../styles";
import BorderGradientButton from "../BorderGradientButton";
import GradientButton from "../GradientButton";
import { FONT_FAMILY } from "../../styles/Fonts";
import AppActionSheet from "../AppActionSheet";

const DeleteModal = () => {
  const onClose = () => {
    SheetManager.hide("Delete");
  };

  return (
    <AppActionSheet id="Delete">
      <View style={{ gap: 20 }}>
        <View style={{ gap: 2 }}>
          <Text
            style={{
              fontSize: 20,
              color: Palette.white,
              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
              textAlign: "center",
            }}
          >
            Supprimer ma playlist
          </Text>
          <Text
            style={{
              fontSize: 16,
              color: Palette.white,
              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
              textAlign: "center",
            }}
          >
            Es-tu sur de vouloir supprimer ta playlist?
          </Text>
        </View>
        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
          <BorderGradientButton title="Oui, supprimer" onPress={onClose} />
          <GradientButton title="Non, annuler" onPress={onClose} />
        </View>
      </View>
    </AppActionSheet>
  );
};

export default DeleteModal;
