import type { RelayConfig } from '@/lib/configStorageTypes'
import { t } from '@/lib/i18n'
import { RelayCard } from './RelayCard'

interface RelayListProps {
  relays: RelayConfig[]
  editingId: string | null
  draggedId: string | null
  dragOverId: string | null
  onStartEditing: (id: string) => void
  onStopEditing: () => void
  onUpdateUrl: (id: string, url: string) => void
  onToggleEnabled: (id: string, enabled: boolean) => void
  onRemoveRelay: (id: string) => void
  onDragStart: (e: React.DragEvent<HTMLDivElement>, id: string) => void
  onDragOver: (e: React.DragEvent<HTMLDivElement>, id: string) => void
  onDragLeave: () => void
  onDrop: (e: React.DragEvent<HTMLDivElement>, targetId: string) => void
  onDragEnd: () => void
}

export function RelayList(params: RelayListProps): React.ReactElement {
  if (params.relays.length === 0) {
    return <div className="text-center py-8 text-cyber-accent">{t('settings.relay.empty')}</div>
  }
  return (
    <div className="space-y-4">
      {params.relays.map((relay) => (
        <RelayCard
          key={relay.id}
          relay={relay}
          isEditing={params.editingId === relay.id}
          draggedId={params.draggedId}
          dragOverId={params.dragOverId}
          onStartEditing={params.onStartEditing}
          onStopEditing={params.onStopEditing}
          onUpdateUrl={params.onUpdateUrl}
          onToggleEnabled={params.onToggleEnabled}
          onRemoveRelay={params.onRemoveRelay}
          onDragStart={params.onDragStart}
          onDragOver={params.onDragOver}
          onDragLeave={params.onDragLeave}
          onDrop={params.onDrop}
          onDragEnd={params.onDragEnd}
        />
      ))}
    </div>
  )
}