import { View } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import { gutters, Palette } from "../../styles";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import EditInput from "./components/EditInput";
import GradientButton from "../../components/GradientButton";

const ChangeEmailAddress = () => {
  return (
    <Page
      headerType="NAVIGATE"
      title="Paramètres"
      backgroundImg={background.profileBG}
      contentContainerStyle={{
        paddingBottom: gutters * 4,
      }}
      containerStyle={{
        backgroundColor: "#0000004D",
      }}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
        <BlurView
          intensity={20}
          style={{
            paddingHorizontal: 20,
            paddingVertical: 23,
            borderRadius: 20,
            overflow: "hidden",
            backgroundColor: Palette.glass,
          }}
        >
          <EditInput placeholder="Adresse mail" label="Adresse mail" />
        </BlurView>
      </View>
      <GradientButton
        title="Enregistrer les modifications"
        containerStyle={{
          width: "80%",
          alignSelf: "center",
        }}
      />
    </Page>
  );
};

export default ChangeEmailAddress;
