'use client'

export interface LabelCardProps {
  label: {
    id: string
    name: string
    logoUrl?: string
    description?: string
    _count?: {
      artists?: number
    }
  }
  showArtistCount?: boolean
  onClick?: (labelId: string) => void
}

export function LabelCard({
  label,
  showArtistCount = true,
  onClick
}: LabelCardProps) {
  const artistCount = label._count?.artists || 0

  const handleClick = () => {
    if (onClick) {
      onClick(label.id)
    }
  }

  return (
    <div
      className="group bg-zinc-900 rounded-lg p-6 hover:bg-zinc-800 transition cursor-pointer text-center"
      onClick={handleClick}
    >
      {/* Logo */}
      <div className="relative w-32 h-32 mx-auto mb-4">
        <div className="w-full h-full rounded-lg overflow-hidden bg-zinc-800">
          {label.logoUrl ? (
            <img
              src={label.logoUrl}
              alt={label.name}
              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="M10 2a8 8 0 100 16 8 8 0 000-16zM8 9a1 1 0 000 2h4a1 1 0 100-2H8z" />
              </svg>
            </div>
          )}
        </div>
      </div>

      {/* Label Info */}
      <div>
        <h3 className="font-semibold text-white truncate mb-1 group-hover:text-purple-400 transition">
          {label.name}
        </h3>

        {showArtistCount && (
          <p className="text-sm text-zinc-400">
            {artistCount} {artistCount === 1 ? 'artist' : 'artists'}
          </p>
        )}

        {label.description && (
          <p className="text-xs text-zinc-500 mt-2 line-clamp-2">
            {label.description}
          </p>
        )}
      </div>
    </div>
  )
}