import { ExternalLink } from 'lucide-react';
import { useTranslation } from '@/contexts/language';

export const ANGOR_PROJECT_URL = 'https://angor.io/project/angor1qtunna00uqyx52rr0nvqa059z2gknhrmn7urd6z';

/**
 * The "Fund the build on Angor" box — a reusable rail card (used on /supporters
 * and /donate). `count` adds the "Join N supporters" line when known.
 */
export function AngorProjectCard({ count, className }: { count?: number; className?: string }) {
  const { t } = useTranslation();
  return (
    <div className={`rounded-2xl border-2 border-[#f7931a]/30 bg-black/60 p-8 text-center ${className ?? ''}`}>
      <div className="mb-4 text-5xl">🧡⚡</div>
      <h3 className="mb-2 text-xl font-black uppercase text-white">{t('walletUi.supporters.backTitle')}</h3>
      <p className="mx-auto mb-6 max-w-lg text-sm leading-relaxed text-gray-400">
        {t('walletUi.supporters.backDesc')}
      </p>
      <div className="flex flex-wrap items-center justify-center gap-3">
        <a
          href={ANGOR_PROJECT_URL}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2 rounded-full border-2 border-[#f7931a]/40 px-5 py-2.5 text-sm font-bold text-[#f7931a] transition-all hover:bg-[#f7931a]/10"
        >
          <ExternalLink className="h-4 w-4" />
          {t('walletUi.supporters.openAngor')}
        </a>
        <span className="text-xs text-gray-500">{t('walletUi.supporters.orZap')}</span>
      </div>
      <p className="mt-4 text-xs text-gray-500">{t('walletUi.supporters.donateNote')}</p>
      {typeof count === 'number' && count > 0 && (
        <p className="mt-2 text-center text-xs font-bold text-[#22d3ee]">
          {t('walletUi.supporters.joinSupporters', { count })}
        </p>
      )}
    </div>
  );
}