import { View, Text, Platform, Pressable, Image as RNImage } from "react-native";
import { Image as ExpoImage } from "expo-image";
import React from "react";
import { img } from "../../../assets";
import { BlurView } from "expo-blur";
import Style, { size } from "../../../styles/Style";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import CoinBadge from "./CoinBadge";

const SongCard = ({ rank = 1, title = "Sans titre", artist = "MusicLand", coverUrl = null, onPress = null }) => {
  return (
    <Pressable
      onPress={onPress || undefined}
      style={{
        ...Style.containerRow,
        gap: 6,
      }}
    >
      {coverUrl ? (
        <ExpoImage
          source={{ uri: coverUrl }}
          cachePolicy="memory-disk"
          priority="high"
          contentFit="cover"
          transition={100}
          style={{ ...size({ size: 60 }), borderRadius: 12 }}
        />
      ) : (
        <RNImage
          source={img.placeholder2}
          style={{ ...size({ size: 60 }), borderRadius: 12 }}
        />
      )}
      <BlurView
        intensity={20}
        style={{
          flex: 1,
          borderRadius: 12,
          overflow: "hidden",
          paddingHorizontal: 8,
          paddingVertical: 11,
          backgroundColor: Palette.glass,
          ...Style.containerRow,
        }}
        tint="dark"
        experimentalBlurMethod={
          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
        }
      >
        <View style={{ flex: 1, ...Style.containerRow, gap: 15 }}>
          <Text
            style={{
              fontSize: 22,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterSemiBold,
            }}
          >
            {rank}
          </Text>
          <View>
            <Text
              style={{
                fontSize: 16,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterMedium,
              }}
            >
              {title}
            </Text>
            <Text
              style={{
                fontSize: 12,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterRegular,
              }}
            >
              {artist}
            </Text>
          </View>
        </View>
        <CoinBadge />
      </BlurView>
    </Pressable>
  );
};

export default SongCard;
