import React from 'react'
import type { Article } from '@/types/nostr'

interface ArticlePreviewProps {
  article: Article
  loading: boolean
  onUnlock: () => void
}

export function ArticlePreview({ article, loading, onUnlock }: ArticlePreviewProps) {
  if (article.paid) {
    return (
      <div>
        <p className="mb-2 text-cyber-accent">{article.preview}</p>
        <p className="text-sm text-cyber-accent/80 mt-4 whitespace-pre-wrap">{article.content}</p>
      </div>
    )
  }

  return (
      <div>
        <p className="mb-4 text-cyber-accent">{article.preview}</p>
        <div className="border-t border-neon-cyan/30 pt-4">
          <p className="text-sm text-cyber-accent/70 mb-4">
            Contenu complet disponible après un zap de {article.zapAmount} sats
          </p>
          <button
            onClick={onUnlock}
            disabled={loading}
            className="px-4 py-2 bg-neon-green/20 hover:bg-neon-green/30 text-neon-green rounded-lg font-medium transition-all border border-neon-green/50 hover:shadow-glow-green disabled:opacity-50"
          >
            {loading ? 'Traitement...' : `Débloquer avec ${article.zapAmount} sats zap`}
          </button>
        </div>
      </div>
  )
}