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

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

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

  return (
    <div>
      <p className="mb-4">{article.preview}</p>
      <div className="border-t pt-4">
        <p className="text-sm text-gray-500 mb-4">
          Full content available after {article.zapAmount} sats zap
        </p>
        {connected ? (
          <button
            onClick={onUnlock}
            disabled={loading}
            className="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
          >
            {loading ? 'Processing...' : `Unlock for ${article.zapAmount} sats`}
          </button>
        ) : (
          <p className="text-sm text-blue-600">Connect with Nostr to unlock this article</p>
        )}
      </div>
    </div>
  )
}