import type { Nip95Config } from '@/lib/configStorageTypes'
import { t } from '@/lib/i18n'
import { Nip95ApiCard } from './Nip95ApiCard'

export function Nip95ApiList(params: {
  apis: Nip95Config[]
  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
  onRemoveApi: (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
}): React.ReactElement {
  if (params.apis.length === 0) {
    return <div className="text-center py-8 text-cyber-accent">{t('settings.nip95.empty')}</div>
  }
  return (
    <div className="space-y-4">
      {params.apis.map((api, index) => (
        <Nip95ApiCard key={api.id} api={api} priority={index + 1} isEditing={params.editingId === api.id} draggedId={params.draggedId} dragOverId={params.dragOverId} onStartEditing={params.onStartEditing} onStopEditing={params.onStopEditing} onUpdateUrl={params.onUpdateUrl} onToggleEnabled={params.onToggleEnabled} onRemoveApi={params.onRemoveApi} onDragStart={params.onDragStart} onDragOver={params.onDragOver} onDragLeave={params.onDragLeave} onDrop={params.onDrop} />
      ))}
    </div>
  )
}