'use client'

export interface ArtistCardProps {
  id: string
  name: string
  avatarUrl?: string
  followers?: number
  verified?: boolean
  onClick?: () => void
}

export function ArtistCard({
  id,
  name,
  avatarUrl,
  followers = 0,
  verified = false,
  onClick
}: ArtistCardProps) {
  const formatFollowers = (count: number) => {
    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`
    if (count >= 1000) return `${(count / 1000).toFixed(1)}K`
    return count.toString()
  }

  return (
    <div
      className="group bg-zinc-900 rounded-lg p-6 hover:bg-zinc-800 transition cursor-pointer text-center"
      onClick={onClick}
    >
      {/* Avatar */}
      <div className="relative w-32 h-32 mx-auto mb-4">
        <div className="w-full h-full rounded-full overflow-hidden bg-zinc-800">
          {avatarUrl ? (
            <img
              src={avatarUrl}
              alt={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 fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
              </svg>
            </div>
          )}
        </div>

        {/* Verified Badge */}
        {verified && (
          <div className="absolute bottom-0 right-0 w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center border-2 border-zinc-900">
            <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
            </svg>
          </div>
        )}
      </div>

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

        {followers > 0 && (
          <p className="text-sm text-zinc-400">
            {formatFollowers(followers)} followers
          </p>
        )}
      </div>
    </div>
  )
}