'use client'

import * as motion from 'framer-motion/m'

interface ButtonProps {
  children: React.ReactNode
  variant?: 'primary' | 'secondary' | 'outline' | 'light'
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
  className?: string
  icon?: React.ReactNode
  style?: React.CSSProperties
  delay?: number
  disabled?: boolean
}

export default function Button({
  children,
  variant = 'primary',
  onClick,
  className = '',
  icon,
  style,
  delay = 0,
  disabled = false
}: ButtonProps) {
  const variants = {
    primary: 'bg-gradient-to-r from-primary to-primary-dark text-white shadow-md hover:shadow-lg',
    secondary: 'bg-secondary text-white hover:bg-secondary-dark',
    outline: 'border-2 border-primary text-primary hover:bg-primary hover:text-white',
    light: 'bg-white text-primary shadow-md hover:shadow-lg hover:bg-primary hover:text-white transition-all duration-300',
  }

  return (
    <motion.button
      whileHover={disabled ? undefined : { scale: 1.02 }}
      whileTap={disabled ? undefined : { scale: 0.98 }}
      initial={{ opacity: 0, x: -50 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay }}
      className={`flex items-center justify-center gap-2 px-6 py-3 rounded-full font-semibold transition-all duration-300 ${variants[variant]} ${disabled ? 'opacity-70 cursor-not-allowed' : ''} ${className}`}
      onClick={onClick}
      style={style}
      disabled={disabled}
    >
      {icon && <span className="flex items-center">{icon}</span>}
      {children}
    </motion.button>
  )
}