import { View, Text } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background, icons } from "../../assets";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack } from "../../navigation/NavigationService";
import { gutters, Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../../components/GradientButton";
import { useRoute } from "@react-navigation/core";

const Regenerate = () => {
  const params = useRoute().params;

  return (
    <Page
      backgroundImg={background.studioBG2}
      headerType="NONE"
      containerStyle={{ paddingBottom: gutters * 2 }}
    >
      <MusicLandHeader onPressBack={goBack} progress={params?.progress} />
      <View style={{ flex: 1, marginTop: 16 }}>
        <CreateLyricsHeader
          title="Regénérer"
          subTitle="Veux-tu changer tes choix ?"
        />
        <View style={{ gap: 27, marginTop: 30 }}>
          <CreateLyricsHeader title="Genre">
            <Text
              style={{
                fontSize: 16,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterRegular,
              }}
            >
              <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
                Hip Hop/Rap
              </Text>{" "}
              : Musique commerciale destinée au grand public, accrocheuse et
              mélodique. Domine les charts internationaux avec des artistes
              ultra-médiatisés.
            </Text>
          </CreateLyricsHeader>
          <CreateLyricsHeader
            title="Voix"
            subTitle="Une voix masculine interpretera ta chanson."
          />
          <CreateLyricsHeader title="Instruments">
            <Text
              style={{
                fontSize: 16,
                color: Palette.gray,
                fontFamily: FONT_FAMILY.InterRegular,
              }}
            >
              Banjo{"\n"}Violon{"\n"}
              Saxophone{"\n"}
              Piano classique{"\n"}
            </Text>
          </CreateLyricsHeader>
        </View>
      </View>
      <GradientButton
        title="Regénérer"
        containerStyle={{ width: "80%", alignSelf: "center" }}
        icon={icons.stars}
        onPress={goBack}
      />
    </Page>
  );
};

export default Regenerate;