"use client"

import type React from "react"
import Image from "next/image"
import Link from "next/link"
import { ChevronRight, Play } from "lucide-react"
import { usePlayer } from "@/components/player-provider"
import { getImageUrl } from "@/lib/image-utils"

interface MoodItemProps {
  id: string
  title: string
  subtitle: string
  count: string
  image: string
  href?: string
  tracks?: any[]
}

export function MoodItem({ id, title, subtitle, count, image, href, tracks = [] }: MoodItemProps) {
  const { playAlbum, currentTrack, isPlaying } = usePlayer()

  const moodTracks = tracks.length > 0 ? tracks : []
  const isMoodPlaying = moodTracks.some((t) => t.id === currentTrack?.id) && isPlaying

  const handlePlay = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (moodTracks.length === 0) return
    playAlbum(moodTracks, 0)
  }

  const content = (
    <div className="group flex items-center gap-3 rounded-lg p-2 transition-colors hover:bg-secondary">
      <div className="relative h-14 w-14 overflow-hidden rounded-lg">
        <Image src={getImageUrl(image, "playlist") || "/placeholder.svg"} alt={title} fill className="object-cover" />
        {/* Play overlay */}
        {moodTracks.length > 0 && !isMoodPlaying && (
          <button
            onClick={handlePlay}
            className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100"
          >
            <Play className="h-6 w-6 text-white" />
          </button>
        )}
        {/* Playing indicator */}
        {isMoodPlaying && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/50">
            <div className="flex gap-0.5">
              <span className="h-3 w-0.5 animate-pulse bg-white" />
              <span className="h-4 w-0.5 animate-pulse bg-white" style={{ animationDelay: "150ms" }} />
              <span className="h-2 w-0.5 animate-pulse bg-white" style={{ animationDelay: "300ms" }} />
            </div>
          </div>
        )}
      </div>
      <div className="flex-1">
        <h3 className={`font-medium ${isMoodPlaying ? "text-primary" : "text-foreground"}`}>{title}</h3>
        <p className="text-sm text-muted-foreground">{subtitle}</p>
      </div>
      <div className="flex items-center gap-2 text-muted-foreground">
        <span className="text-sm">{count}</span>
        <ChevronRight className="h-4 w-4" />
      </div>
    </div>
  )

  if (href) {
    return <Link href={href}>{content}</Link>
  }

  return content
}
