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

const MusicLandHeader = ({
  onPressBack,
  onPressSkip,
  showSkip = false,
  progress = 1,
  logo = null,
}) => {
  const isWeb = Platform.OS === "web";
  const backButtonStyle = isWeb
    ? {
        ...Style.containerRow,
        gap: 8,
        paddingHorizontal: 12,
        paddingVertical: 7,
        borderRadius: 100,
        borderWidth: 1,
        backgroundColor: Palette.ultraLightWhite,
        borderColor: Palette.ultraLightWhite,
        borderStyle: "solid",
      }
    : { width: 24, height: 24, ...Style.containerCenter };
  const backIconSource = isWeb ? icons.chevronDown : icons.chevronDown;
  const backIconStyle = {
    width: 15,
    height: 15,
    transform: [{ rotate: "90deg" }],
  };

  return (
    <View style={{ alignItems: "center", gap: 16 }}>
      <View style={{ width: "100%", ...Style.containerRow, gap: 16 }}>
        <Pressable style={backButtonStyle} onPress={onPressBack}>
          <Image
            source={backIconSource}
            style={backIconStyle}
            resizeMode="contain"
          />
          {isWeb && (
            <Text
              style={{
                fontSize: 14,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterSemiBold,
              }}
            >
              Retour
            </Text>
          )}
        </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>
      <Image
        source={logo}
        style={{
          alignSelf: "center",
          height: isWeb ? 150 : 100,
          resizeMode: "contain",
        }}
      />
    </View>
  );
};

export default MusicLandHeader;