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 { gutters } from "../../styles";
import Slider from "../../components/Slider";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import BorderGradientButton from "../../components/BorderGradientButton";

const RecordedPlayback = () => {
  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 }}
        >
          <GradientButton
            title="Je valide"
          />
          <BorderGradientButton
            title="Je change de décor"
            onPress={() => navigate(Routes.ChooseDecor)}
          />
          <BorderGradientButton title="Recommencer" />
        </View>
      </View>
    </Page>
  );
};

export default RecordedPlayback;
