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

interface ArticleSuggestionsProps {
  similarArticles: Article[]
  authorArticles: Article[]
  onUnlock: (article: Article) => void
  unlockedArticles: Set<string>
}

export function ArticleSuggestions({
  similarArticles,
  authorArticles,
  onUnlock,
  unlockedArticles,
}: ArticleSuggestionsProps): React.ReactElement | null {
  const hasSimilar = similarArticles.length > 0
  const hasAuthor = authorArticles.length > 0

  if (!hasSimilar && !hasAuthor) {
    return null
  }

  return (
    <div className="mt-8 space-y-6">
      {hasSimilar && (
        <SimilarArticlesSection articles={similarArticles} onUnlock={onUnlock} unlockedArticles={unlockedArticles} />
      )}
      {hasAuthor && (
        <AuthorArticlesSection articles={authorArticles} onUnlock={onUnlock} unlockedArticles={unlockedArticles} />
      )}
    </div>
  )
}

function SimilarArticlesSection({
  articles,
  onUnlock,
  unlockedArticles,
}: {
  articles: Article[]
  onUnlock: (article: Article) => void
  unlockedArticles: Set<string>
}): React.ReactElement {
  return (
    <section aria-label={t('suggestions.similarArticles')}>
      <h3 className="text-xl font-semibold text-neon-cyan mb-4">{t('suggestions.similarArticles')}</h3>
      <div className="space-y-4">
        {articles.slice(0, 3).map((article) => (
          <ArticleCard
            key={article.id}
            article={{ ...article, paid: unlockedArticles.has(article.id) || article.paid }}
            onUnlock={onUnlock}
          />
        ))}
      </div>
    </section>
  )
}

function AuthorArticlesSection({
  articles,
  onUnlock,
  unlockedArticles,
}: {
  articles: Article[]
  onUnlock: (article: Article) => void
  unlockedArticles: Set<string>
}): React.ReactElement {
  return (
    <section aria-label={t('suggestions.authorArticles')}>
      <h3 className="text-xl font-semibold text-neon-cyan mb-4">{t('suggestions.authorArticles')}</h3>
      <div className="space-y-4">
        {articles.slice(0, 3).map((article) => (
          <ArticleCard
            key={article.id}
            article={{ ...article, paid: unlockedArticles.has(article.id) || article.paid }}
            onUnlock={onUnlock}
          />
        ))}
      </div>
    </section>
  )
}