frontend/src/components/Card.js

"use client";
import "./Card.css";
import { FaCompactDisc } from "react-icons/fa"; // Importing the add icon
import { TbPlaylistAdd } from "react-icons/tb";
import { useMusicPlayer } from "@/context/MusicPlayerContext";
import { formatTitle } from "@/lib/utils";

const Card = ({ src }) => {
  const { initializePlayer, nowPlaying, addToPlayqueue  } = useMusicPlayer();
  const title = formatTitle(src);

  const handlePlayButtonClick = () => {
    initializePlayer(src, title);
  };

  const handleAddToPlayqueueClick = (e) => {
    e.stopPropagation(); // Prevent the button click from triggering the card play
    addToPlayqueue({ source: src, title });
    console.log(`${title} added to play queue`)
  };

  return (
    <>
    <button onClick={handlePlayButtonClick}>
      <div className={`music-card ${nowPlaying === title ? "now-playing" : ""}`}>
        <FaCompactDisc className="card-icon" />
        <label className="card-title">{title}</label>
      </div>
    </button>
      <button className="add-to-playlist" onClick={handleAddToPlayqueueClick}>
        <TbPlaylistAdd className="add-icon" />
      </button>
    </>
  );
};

export default Card;