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,
  style,
}) => {
  const isWeb = Platform.OS === 'web'
  const backHitSlop = isWeb ? undefined : { top: 16, right: 16, bottom: 16, left: 16 }
  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, ...style }}>
      <View style={{ width: '100%', ...Style.containerRow, gap: 16 }}>
        <Pressable style={backButtonStyle} onPress={onPressBack} hitSlop={backHitSlop}>
          <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>
      {logo && (
        <Image
          source={logo}
          style={{
            alignSelf: 'center',
            height: isWeb ? 150 : 100,
            resizeMode: 'contain',
          }}
        />
      )}
    </View>
  )
}

export default MusicLandHeader