import { View, Text, Image } from "react-native";
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 = () => {
  return (
    <View
      style={{
        ...Style.containerRow,
        gap: 6,
      }}
    >
      <Image
        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"
      >
        <View style={{ flex: 1, ...Style.containerRow, gap: 15 }}>
          <Text
            style={{
              fontSize: 22,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterSemiBold,
            }}
          >
            1
          </Text>
          <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>
    </View>
  );
};

export default SongCard;
