'use client'

import { Link } from '@/i18n/navigation'
import { useTranslations } from 'next-intl'
import { Wallet, ArrowRight } from 'lucide-react'
import { useCurrencyStore } from '@/store/currencyStore'
import { MIN_WITHDRAWAL_AMOUNT } from '@/lib/referral/withdrawalRules'

interface EarningsSummaryProps {
  totalEarnings: number
  withdrawnAmount: number
  availableBalance: number
  pendingAmount: number
}

export default function EarningsSummary({ totalEarnings, withdrawnAmount, availableBalance, pendingAmount }: EarningsSummaryProps) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const t = useTranslations('Account.earnings')
  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
      <div className="flex justify-between items-center mb-4">
        <h3 className="font-semibold text-dark">{t('summaryHeading')}</h3>
        <Link href="/account/earnings/withdraw" className="text-primary text-sm flex items-center gap-1 hover:underline">
          {t('withdraw')} <ArrowRight size={14} />
        </Link>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="text-center p-3 bg-green-50 rounded-lg">
          <p className="text-xs text-green-600 mb-1">{t('totalEarned')}</p>
          <p className="text-xl font-bold text-green-700">{formatAmount(totalEarnings)}</p>
        </div>
        <div className="text-center p-3 bg-blue-50 rounded-lg">
          <p className="text-xs text-blue-600 mb-1">{t('withdrawn')}</p>
          <p className="text-xl font-bold text-blue-700">{formatAmount(withdrawnAmount)}</p>
        </div>
        <div className="text-center p-3 bg-primary/10 rounded-lg">
          <p className="text-xs text-primary mb-1">{t('available')}</p>
          <p className="text-xl font-bold text-primary">{formatAmount(availableBalance)}</p>
        </div>
        <div className="text-center p-3 bg-yellow-50 rounded-lg">
          <p className="text-xs text-yellow-600 mb-1">{t('pending')}</p>
          <p className="text-xl font-bold text-yellow-700">{formatAmount(pendingAmount)}</p>
        </div>
      </div>

      {availableBalance >= MIN_WITHDRAWAL_AMOUNT && (
        <Link
          href="/account/earnings/withdraw"
          className="mt-4 w-full flex items-center justify-center gap-2 bg-gradient-primary text-white py-2.5 rounded-lg font-medium hover:shadow-md transition"
        >
          <Wallet size={16} />
          {t('withdrawAvailable', { amount: formatAmount(MIN_WITHDRAWAL_AMOUNT) })}
        </Link>
      )}
    </div>
  )
}