import { View, Text, StyleSheet, Image } from "react-native";
import React from "react";
import { ai, background } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { gutters } from "../../styles";
import Page from "../../layouts/Page";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";

const Playback = () => {
  return (
    <Page headerType="NONE" backgroundImg={background.playbackBG2}>
      <Image source={ai.john} style={styles.img} resizeMode="contain" />
      <MusicLandHeader onPressBack={goBack} progress={25} />
      <View
        style={{
          flex: 1,
          paddingBottom: gutters * 2,
          justifyContent: "flex-end",
        }}
      >
        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
          <BorderGradientButton title="Guide du Playbacker" />
          <BorderGradientButton title="Importer une vidéo" />
          <GradientButton
            title="Enregistrer mon Playback"
            onPress={() => navigate(Routes.RecordPlayback)}
          />
        </View>
      </View>
    </Page>
  );
};

export default Playback;

const styles = StyleSheet.create({
  img: {
    width: "100%",
    height: "70%",
    position: "absolute",
    bottom: -40,
  },
});
