import * as React from 'react'

const Button = React.forwardRef(({ className = '', variant = 'default', size = 'default', ...props }, ref) => {
  const baseStyles = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-navy focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none'
  
  const variants = {
    default: 'bg-primary-navy text-white hover:bg-primary-navy-dark',
    secondary: 'bg-section-alt text-text hover:bg-opacity-80',
    outline: 'border border-border bg-background hover:bg-section-alt hover:text-text',
    ghost: 'hover:bg-section-alt hover:text-text',
    link: 'text-primary-navy underline-offset-4 hover:underline',
  }
  
  const sizes = {
    default: 'h-10 px-4 py-2',
    sm: 'h-9 rounded-md px-3',
    lg: 'h-11 rounded-md px-8',
    icon: 'h-10 w-10',
  }

  return (
    <button
      ref={ref}
      className={`${baseStyles} ${variants[variant] || ''} ${sizes[size] || ''} ${className}`}
      {...props}
    />
  )
})
Button.displayName = 'Button'

export { Button }