import { useRouter } from 'next/router'
import Image from 'next/image'
import type { Article } from '@/types/nostr'
import { Card } from './ui'
import { t } from '@/lib/i18n'

interface AuthorCardProps {
  presentation: Article
}

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

  const handleClick = (): void => {
    void router.push(`/author/${presentation.pubkey}`)
  }

  return (
    <Card variant="interactive" onClick={handleClick} className="bg-cyber-dark/50">
      <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>
    </Card>
  )
}