'use client'

import { ArtistCard } from './ArtistCard'

export interface ArtistRosterProps {
  artists: Array<{
    id: string
    name: string
    user?: {
      avatarUrl?: string
    }
    _count?: {
      followers?: number
    }
    verified?: boolean
  }>
  isOwner?: boolean
  emptyMessage?: string
  onRemoveArtist?: (artistId: string) => void
  onArtistClick?: (artistId: string) => void
}

export function ArtistRoster({
  artists,
  isOwner = false,
  emptyMessage = 'No artists signed yet',
  onRemoveArtist,
  onArtistClick
}: ArtistRosterProps) {
  if (artists.length === 0) {
    return (
      <div className="text-center py-12">
        <svg className="w-16 h-16 text-zinc-600 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
        </svg>
        <p className="text-zinc-400 text-lg">{emptyMessage}</p>
      </div>
    )
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {artists.map((artist) => (
        <div key={artist.id} className="relative group">
          <ArtistCard
            id={artist.id}
            name={artist.name}
            avatarUrl={artist.user?.avatarUrl}
            followers={artist._count?.followers}
            verified={artist.verified}
            onClick={() => onArtistClick?.(artist.id)}
          />

          {/* Remove Button (only visible for owners) */}
          {isOwner && onRemoveArtist && (
            <button
              onClick={(e) => {
                e.stopPropagation()
                onRemoveArtist(artist.id)
              }}
              className="absolute top-2 right-2 p-2 bg-red-600 hover:bg-red-700 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
              title="Remove artist"
            >
              <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          )}
        </div>
      ))}
    </div>
  )
}