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

const PlaybackExample = () => {
  return (
    <Page backgroundImg={background.productionBG} headerType="NONE">
      <MusicLandHeader progress={50} onPressBack={goBack} />
      <View
        style={{ flex: 1, paddingTop: 12, gap: 14, paddingBottom: gutters * 2 }}
      >
        <CreateLyricsHeader title="Exemple" subTitle="Exemple de Playback" />
        <View style={{ flex: 1, gap: 22 }}>
          <Image
            source={img.placeholder3}
            style={{
              width: "80%",
              flex: 1,
              alignSelf: "center",
              borderRadius: 16,
            }}
          />
          <Slider value="0:00" maxValue="2:00" />
        </View>
        <GradientButton
          title="Je veux devenir Playbacker"
          containerStyle={{
            width: "80%",
            alignSelf: "center",
            marginTop: 4,
          }}
          onPress={() => navigate(Routes.PlaybackOnboarding)}
        />
      </View>
    </Page>
  );
};

export default PlaybackExample;