import type { Article } from '@/types/nostr'
import { useNostrConnect } from '@/hooks/useNostrConnect'
import { useArticlePayment } from '@/hooks/useArticlePayment'
import { ArticlePreview } from './ArticlePreview'
import { PaymentModal } from './PaymentModal'

interface ArticleCardProps {
  article: Article
  onUnlock?: (article: Article) => void
}

export function ArticleCard({ article, onUnlock }: ArticleCardProps) {
  const { connected, pubkey } = useNostrConnect()
  const {
    loading,
    error,
    paymentInvoice,
    handleUnlock,
    handlePaymentComplete,
    handleCloseModal,
  } = useArticlePayment(article, pubkey ?? null, () => {
    onUnlock?.(article)
  })

  return (
    <article className="border rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
      <h2 className="text-2xl font-bold mb-2">{article.title}</h2>
      <div className="text-gray-600 mb-4">
        <ArticlePreview
          article={article}
          connected={connected}
          loading={loading}
          onUnlock={handleUnlockClick}
        />
      </div>
      {error && <p className="text-sm text-red-600 mt-2">{error}</p>}
      <div className="text-xs text-gray-400 mt-4">
        Published {new Date(article.createdAt * 1000).toLocaleDateString()}
      </div>
      {paymentInvoice && (
        <PaymentModal
          invoice={paymentInvoice}
          onClose={handleCloseModal}
          onPaymentComplete={handlePaymentComplete}
        />
      )}
    </article>
  )
}