import { motion, useReducedMotion } from 'framer-motion';

export function Button({ variant = 'primary', className = '', children, ...props }) {
  const reduceMotion = useReducedMotion();
  const variantClass =
    variant === 'ghost' ? 'btn-ghost' : variant === 'primary' ? 'btn-primary' : '';
  const combined = ['btn', variantClass, className].filter(Boolean).join(' ');
  return (
    <motion.button
      className={combined}
      whileHover={reduceMotion ? undefined : { y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.2)' }}
      whileTap={reduceMotion ? undefined : { scale: 0.98 }}
      {...props}
    >
      {children}
    </motion.button>
  );
}