'use client'

import * as motion from 'framer-motion/m'
import { useTranslations } from 'next-intl'
import { Mail, MessageCircle } from 'lucide-react'
// lucide-react dropped brand icons (Facebook/Instagram/Twitter/etc.) — use react-icons for these.
import { FaFacebook } from 'react-icons/fa'

interface SocialLoginProps {
  onSocialLogin?: (provider: string) => void
}

export default function SocialLogin({ onSocialLogin }: SocialLoginProps) {
  const tShared = useTranslations('Auth.shared')
  const socialProviders = [
    { name: 'Google', icon: Mail, color: '#DB4437', bgColor: 'bg-red-50' },
    { name: 'Facebook', icon: FaFacebook, color: '#1877F2', bgColor: 'bg-blue-50' },
    { name: 'WhatsApp', icon: MessageCircle, color: '#25D366', bgColor: 'bg-green-50' },
  ]

  return (
    <div>
      <div className="relative my-6">
        <div className="absolute inset-0 flex items-center">
          <div className="w-full border-t border-gray-200" />
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="px-2 bg-white text-gray-custom">{tShared('orContinueWith')}</span>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-3">
        {socialProviders.map((provider) => (
          <motion.button
            key={provider.name}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={() => onSocialLogin?.(provider.name)}
            className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border border-gray-200 hover:shadow-md transition-all`}
          >
            <provider.icon size={18} style={{ color: provider.color }} />
            <span className="text-sm font-medium text-dark">{provider.name}</span>
          </motion.button>
        ))}
      </div>
    </div>
  )
}