story-research-zapwall/components/ArticlesList.tsx

import type { Article } from '@/types/nostr'
import { ArticleCard } from './ArticleCard'

interface ArticlesListProps {
  articles: Article[]
  allArticles: Article[]
  loading: boolean
  error: string | null
  onUnlock: (article: Article) => void
  unlockedArticles: Set<string>
}

function LoadingState() {
  return (
    <div className="text-center py-12">
      <p className="text-gray-500">Loading articles...</p>
    </div>
  )
}

function ErrorState({ message }: { message: string }) {
  return (
    <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
      <p className="text-red-800">{message}</p>
    </div>
  )
}

function EmptyState({ hasAny }: { hasAny: boolean }) {
  return (
    <div className="text-center py-12">
      <p className="text-gray-500">
        {hasAny ? 'No articles match your search or filters.' : 'No articles found. Check back later!'}
      </p>
    </div>
  )
}

export function ArticlesList({
  articles,
  allArticles,
  loading,
  error,
  onUnlock,
  unlockedArticles,
}: ArticlesListProps) {
  if (loading) {
    return <LoadingState />
  }
  if (error) {
    return <ErrorState message={error} />
  }
  if (articles.length === 0) {
    return <EmptyState hasAny={allArticles.length > 0} />
  }

  return (
    <>
      <div className="mb-4 text-sm text-gray-600">
        Showing {articles.length} of {allArticles.length} article{allArticles.length !== 1 ? 's' : ''}
      </div>
      <div className="space-y-6">
        {articles.map((article) => (
          <ArticleCard
            key={article.id}
            article={{ ...article, paid: unlockedArticles.has(article.id) || article.paid }}
            onUnlock={onUnlock}
          />
        ))}
      </div>
    </>
  )
}