import { View, Text, Image, FlatList } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
import { navigate } from "../../../navigation/NavigationService";
import { Routes } from "../../../navigation";

const LikedMusic = () => {
  return (
    <CardContainer
      label="Musiques likées"
      onPress={() => navigate(Routes.AllMyLikedMusic)}
    >
      <FlatList
        scrollEnabled={false}
        data={Array.from({ length: 6 })}
        numColumns={3}
        contentContainerStyle={{ gap: 10 }}
        columnWrapperStyle={{ gap: 6 }}
        renderItem={() => (
          <View style={{ flex: 1 }}>
            <Image
              source={img.placeholder3}
              style={{ width: "100%", height: 172, borderRadius: 10 }}
            />
          </View>
        )}
      />
    </CardContainer>
  );
};

export default LikedMusic;
