import { useTranslation } from '@/contexts/language';

/**
 * "Ways to support" — three purpose-first cards; each scrolls to its rail by id
 * (#support-lightning / #support-silent / #support-angor), so it works anywhere
 * those anchors exist (/supporters and /donate).
 */
export function WaysToSupport({ className }: { className?: string }) {
  const { t } = useTranslation();
  const ways = [
    { id: 'support-lightning', emoji: '⚡', title: t('walletUi.supporters.wayLightningTitle'), desc: t('walletUi.supporters.wayLightningDesc') },
    { id: 'support-silent', emoji: '🕵️', title: t('walletUi.supporters.waySilentTitle'), desc: t('walletUi.supporters.waySilentDesc') },
    { id: 'support-angor', emoji: '⛓', title: t('walletUi.supporters.wayAngorTitle'), desc: t('walletUi.supporters.wayAngorDesc') },
  ];
  return (
    <div className={`grid grid-cols-1 gap-3 sm:grid-cols-3 ${className ?? ''}`}>
      {ways.map((w) => (
        <button
          key={w.id}
          onClick={() => document.getElementById(w.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
          className="min-h-0 min-w-0 rounded-xl border border-white/10 bg-black/60 p-4 text-left transition-colors hover:border-[#ccff00]/40 hover:bg-white/5"
        >
          <span className="text-2xl">{w.emoji}</span>
          <p className="mt-2 text-sm font-black uppercase text-white">{w.title}</p>
          <p className="mt-1 text-xs text-gray-400">{w.desc}</p>
        </button>
      ))}
    </div>
  );
}