import { View, Text } from "react-native";
import React from "react";
import AppActionSheet from "../AppActionSheet";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BlurItemButton from "../BlurItemButton";
import { SheetManager } from "react-native-actions-sheet";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";

const ProfileSettingsModal = () => {
  const onClose = async () => {
    await SheetManager.hide("ProfileSettings");
  };

  return (
    <AppActionSheet id="ProfileSettings">
      <View style={{ paddingTop: 10, gap: 30 }}>
        <Text
          style={{
            fontSize: 20,
            color: Palette.white,
            fontFamily: FONT_FAMILY.HelveticaNeueMedium,
            textAlign: "center",
          }}
        >
          Paramètres
        </Text>
        <View style={{ gap: 10 }}>
          <BlurItemButton
            title="Modifier mon profil"
            onPress={() => {
              onClose();
              navigate(Routes.EditProfile);
            }}
          />
          <BlurItemButton
            title="Paramètres"
            onPress={() => {
              onClose();
              navigate(Routes.Settings);
            }}
          />
        </View>
      </View>
    </AppActionSheet>
  );
};

export default ProfileSettingsModal;