import type { Article } from '@/types/nostr'
import { AuthorCard } from './AuthorCard'
import { t } from '@/lib/i18n'

interface AuthorsListProps {
  authors: Article[]
  allAuthors: Article[]
  loading: boolean
  error: string | null
}

function LoadingState(): JSX.Element {
  return (
    <div className="text-center py-12">
      <p className="text-cyber-accent/70">{t('common.loading.authors')}</p>
    </div>
  )
}

function ErrorState({ message }: { message: string }): JSX.Element {
  return (
    <div className="bg-red-900/20 border border-red-500/50 rounded-lg p-4 mb-4">
      <p className="text-red-400">{message}</p>
    </div>
  )
}

function EmptyState({ hasAny }: { hasAny: boolean }): JSX.Element {
  return (
    <div className="text-center py-12">
      <p className="text-cyber-accent/70">
        {hasAny ? t('common.empty.authors.filtered') : t('common.empty.authors')}
      </p>
    </div>
  )
}

export function AuthorsList({ authors, allAuthors, loading, error }: AuthorsListProps): JSX.Element {
  if (loading) {
    return <LoadingState />
  }
  if (error) {
    return <ErrorState message={error} />
  }
  if (authors.length === 0) {
    return <EmptyState hasAny={allAuthors.length > 0} />
  }

  return (
    <>
      <div className="mb-4 text-sm text-cyber-accent/70">
        Showing {authors.length} of {allAuthors.length} author{allAuthors.length !== 1 ? 's' : ''}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {authors.map((author) => (
          <AuthorCard key={author.pubkey} presentation={author} />
        ))}
      </div>
    </>
  )
}