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

const VideoFinalize = () => {
  return (
    <Page backgroundImg={background.playbackBG2} headerType="NONE">
      <MusicLandHeader progress={19} onPressBack={goBack} />
      <View
        style={{ flex: 1, paddingTop: 12, gap: 14, paddingBottom: gutters * 2 }}
      >
        <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>
        <View
          style={{ width: "80%", alignSelf: "center", marginTop: 4, gap: 12 }}
        >
          <BorderGradientButton
            icon={icons.stars}
            title="Regénérer"
            onPress={goBack}
          />
          <GradientButton
            title="Valider"
            onPress={() =>
              navigate(Routes.DownloadSongs, {
                action: "playback",
              })
            }
          />
        </View>
      </View>
    </Page>
  );
};

export default VideoFinalize;
