import React from 'react';
import { motion } from 'framer-motion';

const Button = ({ 
  children, 
  onClick, 
  variant = 'primary', 
  className = '', 
  icon: Icon,
  type = 'button',
  disabled = false,
  ...props 
}) => {
  const baseStyles = "flex items-center justify-center gap-2 px-6 py-3 font-bold transition-all rough-border cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed";
  
  const variants = {
    primary: "bg-primary text-on-primary hover:opacity-90",
    secondary: "bg-secondary text-primary hover:bg-secondary/90",
    outline: "bg-surface-container-lowest text-primary border-primary/20 hover:bg-primary/5",
    error: "bg-error text-white hover:opacity-90",
    ghost: "border-transparent bg-transparent hover:bg-primary/5 shadow-none",
    'rough-shadow': "bg-surface-container-lowest rough-shadow-hover hover:translate-y-[-2px]"
  };

  return (
    <motion.button
      whileHover={{ scale: disabled ? 1 : 1.02 }}
      whileTap={{ scale: disabled ? 1 : 0.98 }}
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={`${baseStyles} ${variants[variant] || variants.primary} ${className}`}
      {...props}
    >
      {Icon && <Icon size={20} />}
      {children}
    </motion.button>
  );
};

export default Button;