import Link from 'next/link'
import Image from 'next/image'
import type { Article } from '@/types/nostr'
import { t } from '@/lib/i18n'

interface AuthorCardProps {
  presentation: Article
}

export function AuthorCard({ presentation }: AuthorCardProps) {
  const authorName = presentation.title.replace(/^Présentation de /, '') || t('common.author')
  const totalBTC = (presentation.totalSponsoring ?? 0) / 100_000_000

  return (
    <Link
      href={`/author/${presentation.pubkey}`}
      className="block border border-neon-cyan/20 rounded-lg p-6 bg-cyber-dark/50 hover:bg-cyber-dark hover:border-neon-cyan/40 transition-all hover:shadow-glow-cyan"
    >
      <div className="flex items-start gap-4">
        {presentation.bannerUrl && (
          <div className="relative w-20 h-20 rounded-lg overflow-hidden border border-neon-cyan/20 flex-shrink-0">
            <Image
              src={presentation.bannerUrl}
              alt={authorName}
              fill
              className="object-cover"
            />
          </div>
        )}
        <div className="flex-1 min-w-0">
          <h3 className="text-xl font-bold text-neon-cyan mb-2 truncate">{authorName}</h3>
          <p className="text-cyber-accent text-sm line-clamp-2 mb-3">{presentation.preview}</p>
          {presentation.totalSponsoring !== undefined && presentation.totalSponsoring > 0 && (
            <div className="text-xs text-neon-green">
              {t('author.sponsoring.total', { amount: totalBTC.toFixed(6) })} BTC
            </div>
          )}
        </div>
      </div>
    </Link>
  )
}