import { View, Text, Image, Pressable } from "react-native";
import React from "react";
import { icons } from "../assets";
import { Palette, Style } from "../styles";
import ProgressBar from "./ProgressBar";
import { FONT_FAMILY } from "../styles/Fonts";

const MusicLandHeader = ({
  onPressBack,
  onPressSkip,
  showSkip = false,
  progress = 1,
}) => {
  return (
    <View style={{ alignItems: "center", gap: 16 }}>
      <Image source={icons.musicLandLogo} />
      <View style={{ width: "100%", ...Style.containerRow, gap: 16 }}>
        <Pressable
          style={{ width: 24, height: 24, ...Style.containerCenter }}
          onPress={onPressBack}
        >
          <Image
            source={icons.chevronDown}
            style={{ width: 15, height: 15, transform: [{ rotate: "90deg" }] }}
            resizeMode="contain"
          />
        </Pressable>
        <View style={{ flex: 1 }}>
          <ProgressBar progress={progress} />
        </View>
        {showSkip && (
          <Pressable onPress={onPressSkip}>
            <Text
              style={{
                fontSize: 14,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterRegular,
              }}
            >
              Passer
            </Text>
          </Pressable>
        )}
      </View>
    </View>
  );
};

export default MusicLandHeader;