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

const PlaybacksCard = () => {
  return (
    <BlurView
      intensity={20}
      tint="dark"
      style={{
        ...Style.containerSpaceBetween,
        paddingHorizontal: 8,
        paddingVertical: 4,
        borderRadius: 12,
        backgroundColor: Palette.glass,
        overflow: "hidden",
      }}
      experimentalBlurMethod={
        Platform.OS !== "ios" ? "dimezisBlurView" : "none"
      }
    >
      <View
        style={{
          ...Style.containerRow,
          gap: 15,
        }}
      >
        <Text
          style={{
            fontSize: 22,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterSemiBold,
          }}
        >
          1
        </Text>
        <Image
          source={img.placeholder3}
          style={{ width: 67, height: 108, borderRadius: 16 }}
        />
        <View>
          <Text
            style={{
              fontSize: 16,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterMedium,
            }}
          >
            Alors on danse
          </Text>
          <Text
            style={{
              fontSize: 12,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterRegular,
            }}
          >
            Stromae
          </Text>
        </View>
      </View>
      <CoinBadge />
    </BlurView>
  );
};

export default PlaybacksCard;
