import React from 'react'
import { colors } from '../theme'

const Button = ({ 
  children, 
  variant = 'primary', 
  size = 'medium',
  disabled = false,
  onClick,
  className = '',
  ...props 
}) => {
  const baseStyles = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: 'none',
    borderRadius: '8px',
    fontWeight: '600',
    cursor: disabled ? 'not-allowed' : 'pointer',
    transition: 'all 0.2s ease-in-out',
    textDecoration: 'none',
    fontFamily: 'inherit'
  }
  
  const variants = {
    primary: {
      backgroundColor: colors.orange[500],
      color: colors.white,
      ':hover': !disabled && {
        backgroundColor: colors.orange[600],
        transform: 'translateY(-1px)'
      }
    },
    secondary: {
      backgroundColor: colors.olive[500],
      color: colors.white,
      ':hover': !disabled && {
        backgroundColor: colors.olive[600],
        transform: 'translateY(-1px)'
      }
    },
    outline: {
      backgroundColor: 'transparent',
      color: colors.orange[500],
      border: `2px solid ${colors.orange[500]}`,
      ':hover': !disabled && {
        backgroundColor: colors.orange[500],
        color: colors.white
      }
    },
    ghost: {
      backgroundColor: 'transparent',
      color: 'var(--theme-text, #1c1c1c)',
      ':hover': !disabled && {
        backgroundColor: 'var(--theme-surface, #f9f9f9)'
      }
    }
  }
  
  const sizes = {
    small: {
      padding: '8px 16px',
      fontSize: '14px',
      minHeight: '32px'
    },
    medium: {
      padding: '12px 24px',
      fontSize: '16px',
      minHeight: '40px'
    },
    large: {
      padding: '16px 32px',
      fontSize: '18px',
      minHeight: '48px'
    }
  }
  
  const disabledStyles = disabled ? {
    opacity: 0.5,
    cursor: 'not-allowed'
  } : {}
  
  const buttonStyles = {
    ...baseStyles,
    ...variants[variant],
    ...sizes[size],
    ...disabledStyles
  }
  
  return (
    <button
      style={buttonStyles}
      disabled={disabled}
      onClick={onClick}
      className={className}
      {...props}
    >
      {children}
    </button>
  )
}

export default Button