'use client'

import * as motion from 'framer-motion/m'
import { useTranslations } from 'next-intl'
import { Users, Gift, TrendingUp } from 'lucide-react'
import { useCurrencyStore } from '@/store/currencyStore'

interface ReferralStatsProps {
  totalReferrals: number
  activeReferrals: number
  totalEarnings: number
}

export default function ReferralStats({ totalReferrals, activeReferrals, totalEarnings }: ReferralStatsProps) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const t = useTranslations('Account.referrals')
  const stats = [
    { label: t('totalReferrals'), value: totalReferrals, icon: Users },
    { label: t('activeReferrals'), value: activeReferrals, icon: Gift },
    { label: t('totalEarnings'), value: formatAmount(totalEarnings), icon: TrendingUp },
  ]

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      {stats.map((stat, index) => (
        <motion.div
          key={stat.label}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: index * 0.1 }}
          className="bg-white rounded-xl p-4 text-center border border-gray-100 shadow-sm"
        >
          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3">
            <stat.icon className="w-5 h-5 text-primary" />
          </div>
          <div className="text-xl font-bold text-dark">{stat.value}</div>
          <div className="text-xs text-gray-custom mt-1">{stat.label}</div>
        </motion.div>
      ))}
    </div>
  )
}