'use client'

import * as motion from 'framer-motion/m'
import { Share2, UserPlus, TrendingUp, Wallet } from 'lucide-react'
import { useTranslations } from 'next-intl'

const STEPS = [
  { icon: Share2, key: 'share' },
  { icon: UserPlus, key: 'signup' },
  { icon: TrendingUp, key: 'shop' },
  { icon: Wallet, key: 'paid' },
] as const

// `reward` is the real, admin-configured reward ("5%" / "PKR 100") from
// site_settings, or null while the referral programme is switched off.
export default function ReferralHowItWorks({ reward }: { reward: string | null }) {
  const t = useTranslations('ReferralPage.steps')
  const tPage = useTranslations('ReferralPage')

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
      <h3 className="font-semibold text-dark mb-6 text-center">{tPage('howItWorks')}</h3>
      <div className="grid md:grid-cols-4 gap-6">
        {STEPS.map((step, index) => (
          <motion.div
            key={step.key}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.1 }}
            className="text-center"
          >
            <div className="relative">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
                <step.icon className="w-8 h-8 text-primary" />
              </div>
              {index < STEPS.length - 1 && (
                <div className="hidden md:block absolute top-8 left-[calc(50%+40px)] w-[calc(100%-80px)] h-0.5 bg-gray-200" />
              )}
            </div>
            <h4 className="font-semibold text-dark mb-2">{t(`${step.key}.title`)}</h4>
            <p className="text-xs text-gray-custom">
              {step.key === 'paid' ? (reward ? t('paid.description', { reward }) : t('paid.descriptionPaused')) : t(`${step.key}.description`)}
            </p>
          </motion.div>
        ))}
      </div>
    </div>
  )
}