import { Image, Pressable, View } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import GradientButton from "../../components/GradientButton";
import { gutters, Style } from "../../styles";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import { icons } from "../../assets";

const Writing = ({ navigation }) => {
  return (
    <Page
      headerType="NONE"
      containerStyle={{ paddingHorizontal: 0 }}
      contentContainerStyle={{
        padding: gutters * 2,
      }}
    >
      <Pressable
        style={{ width: 24, height: 24, ...Style.containerCenter }}
        onPress={() => navigation.goBack()}
      >
        <Image
          source={icons.chevronDown}
          style={{ width: 15, height: 15, transform: [{ rotate: "90deg" }] }}
          resizeMode="contain"
        />
      </Pressable>
      <View style={{ flex: 1, justifyContent: "flex-end" }}>
        <GradientButton
          title="Commencer"
          onPress={() => navigate(Routes.CreateLyricsWithAi)}
        />
      </View>
    </Page>
  );
};

export default Writing;
