'use client'

export interface AlbumCardProps {
  id: string
  title: string
  artistName: string
  coverUrl?: string
  releaseYear?: number
  trackCount?: number
  onClick?: () => void
}

export function AlbumCard({
  id,
  title,
  artistName,
  coverUrl,
  releaseYear,
  trackCount,
  onClick
}: AlbumCardProps) {
  return (
    <div
      className="group bg-zinc-900 rounded-lg p-4 hover:bg-zinc-800 transition cursor-pointer"
      onClick={onClick}
    >
      {/* Cover Image */}
      <div className="relative aspect-square rounded-md overflow-hidden mb-4 bg-zinc-800">
        {coverUrl ? (
          <img
            src={coverUrl}
            alt={title}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center">
            <svg className="w-16 h-16 text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
              <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
            </svg>
          </div>
        )}

        {/* Play Button Overlay */}
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all">
          <button className="w-14 h-14 rounded-full bg-purple-500 hover:bg-purple-600 hover:scale-110 flex items-center justify-center transition-transform">
            <svg className="w-7 h-7 text-white ml-1" fill="currentColor" viewBox="0 0 20 20">
              <path d="M6.3 4.1c-.4-.2-.8 0-.8.4v11c0 .4.4.6.8.4l9-5.5c.3-.2.3-.6 0-.8l-9-5.5z" />
            </svg>
          </button>
        </div>
      </div>

      {/* Album Info */}
      <div>
        <h3 className="font-semibold text-white truncate mb-1 group-hover:text-purple-400 transition">
          {title}
        </h3>
        <p className="text-sm text-zinc-400 truncate mb-1">{artistName}</p>

        {(releaseYear || trackCount) && (
          <div className="flex items-center gap-2 text-xs text-zinc-500">
            {releaseYear && <span>{releaseYear}</span>}
            {releaseYear && trackCount && <span>•</span>}
            {trackCount && <span>{trackCount} {trackCount === 1 ? 'track' : 'tracks'}</span>}
          </div>
        )}
      </div>
    </div>
  )
}