import type { Page } from '@/types/nostr'
import { t } from '@/lib/i18n'

interface ArticlePagesProps {
  pages: Page[]
}

export function ArticlePages({ pages }: ArticlePagesProps): React.ReactElement {
  if (!pages || pages.length === 0) {
    return <></>
  }

  return (
    <div className="space-y-6 mt-6">
      <h3 className="text-xl font-semibold text-neon-cyan">{t('article.pages.title')}</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {pages.map((page) => (
          <PageDisplay key={page.number} page={page} />
        ))}
      </div>
    </div>
  )
}

function PageDisplay({ page }: { page: Page }): React.ReactElement {
  return (
    <div className="border border-neon-cyan/30 rounded-lg p-4 bg-cyber-dark">
      <div className="flex items-center justify-between mb-2">
        <h4 className="font-semibold text-neon-cyan">
          {t('page.number', { number: page.number })}
        </h4>
        <span className="text-xs text-cyber-accent/70">{t(`page.type.${page.type}`)}</span>
      </div>
      {page.type === 'markdown' ? (
        <div className="prose prose-invert max-w-none text-cyber-accent whitespace-pre-wrap">
          {page.content || <span className="text-cyber-accent/50">{t('page.markdown.empty')}</span>}
        </div>
      ) : (
        <div className="space-y-2">
          {page.content ? (
            <img
              src={page.content}
              alt={t('page.image.alt', { number: page.number })}
              className="max-w-full h-auto rounded border border-neon-cyan/20"
            />
          ) : (
            <div className="text-center py-8 text-cyber-accent/50 border border-dashed border-neon-cyan/20 rounded">
              {t('page.image.empty')}
            </div>
          )}
        </div>
      )}
    </div>
  )
}