import React from "react";
import { View } from "react-native";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUser } from "../../../providers/UserDataProvider";
import CardContainer from "./CardContainer";
import MusicCard from "./MusicCard";

const MyMusic = () => {
  const { userProjects = [] } = useUser();
  const projects = Array.isArray(userProjects) ? userProjects.slice(0, 3) : [];
  return (
    <CardContainer
      label="Mes musiques"
      onPress={() => navigate(Routes.AllMyMusic)}
    >
      <View style={{ gap: 10 }}>
        {Array.isArray(projects) &&
          projects.map((p) => (
            <MusicCard
              key={p.id}
              title={p?.title}
              subtitle={"MusicLand"}
              imageUri={p?.coverUrl || null}
              projectId={p?.id}
              likedBy={p?.likedBy || []}
              onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
              onPressMore={() => console.log("More options for", p.id)}
            />
          ))}
      </View>
    </CardContainer>
  );
};

export default MyMusic;