import { View } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import { gutters } from "../../styles";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack } from "../../navigation/NavigationService";
import BorderGradientButton from "../../components/BorderGradientButton";

const Production = () => {
  return (
    <Page headerType="NONE" backgroundImg={background.productionBG}>
      <MusicLandHeader onPressBack={goBack} progress={9} />
      <View
        style={{
          flex: 1,
          paddingBottom: gutters * 2,
          justifyContent: "flex-end",
          gap: 37,
        }}
      >
        <BorderGradientButton title="Je télécharge ma chanson" />
        <View style={{ gap: 12 }}>
          <GradientButton title="Je veux devenir Playbacker" />
          <BorderGradientButton title="Voir exemples" />
        </View>
        <View style={{ gap: 12 }}>
          <GradientButton title="Je veux créer un Clip" />
          <BorderGradientButton title="Voir exemples" />
        </View>
      </View>
    </Page>
  );
};

export default Production;
