"use client";
import Image from "next/image";
import { Play, Music } from "lucide-react";
import { useAppDispatch } from "@/store/hooks";
import { playMedia } from "@/store/slices/playerSlice";

interface MusicCardProps {
  id: string;
  name: string;
  artist: string;
  image: string;
  hue: number;
}

export function MusicCard({ id, name, artist, image, hue }: MusicCardProps) {
  const dispatch = useAppDispatch();

  return (
    <div
      className="shrink-0 cursor-pointer group"
      style={{ width: "120px" }}
      onClick={() =>
        dispatch(
          playMedia({
            id,
            type: "audio",
            title: name,
            thumbnail: image,
            channelName: artist,
          }),
        )
      }
    >
      <div
        className="relative rounded-lg overflow-hidden transition-all duration-200 group-hover:-translate-y-0.5 group-hover:shadow-2xl"
        style={{ width: "120px", height: "120px" }}
      >
        <Image
          src={image}
          alt={name}
          fill
          className="object-cover transition-transform duration-[280ms] ease-out group-hover:scale-[1.04]"
          sizes="120px"
          unoptimized
        />
        {/* color glow */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: `radial-gradient(circle at 30% 30%, hsla(${hue},70%,60%,0.35), transparent 60%)`,
          }}
        />

        {/* music icon (visible, hide on hover) */}
        <div className="absolute inset-0 flex items-center justify-center pointer-events-none group-hover:opacity-0 transition-opacity">
          <Music size={22} color="var(--text-muted)" strokeWidth={1.5} />
        </div>

        {/* play button (show on hover) */}
        <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          <span
            className="w-9 h-9 rounded-full flex items-center justify-center shadow-lg"
            style={{ background: "var(--accent)" }}
          >
            <Play size={15} fill="white" strokeWidth={0} className="ml-0.5" />
          </span>
        </div>
      </div>

      <p className="mt-2 text-[10px] font-medium truncate" style={{ color: "var(--text-primary)" }}>{name}</p>
      <p className="text-[10px] mt-0.5 truncate" style={{ color: "#888" }}>
        {artist}
      </p>
    </div>
  );
}