import React from 'react'
import styles from '@/app/styles/components/Button.module.css'

type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'icon'
type ButtonSize = 'sm' | 'md' | 'lg'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant
  size?: ButtonSize
  isLoading?: boolean
  children: React.ReactNode
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      variant = 'primary',
      size = 'md',
      isLoading = false,
      className = '',
      disabled,
      children,
      ...props
    },
    ref
  ) => {
    const baseClass = styles.button
    const variantClass = styles[`button--${variant}`] || ''
    const sizeClass = size !== 'md' ? styles[`button--${size}`] : ''
    const loadingClass = isLoading ? styles['button--loading'] : ''
    const disabledClass = disabled || isLoading ? '' : ''

    return (
      <button
        ref={ref}
        className={`${baseClass} ${variantClass} ${sizeClass} ${loadingClass} ${className}`.trim()}
        disabled={disabled || isLoading}
        {...props}
      >
        {children}
      </button>
    )
  }
)

Button.displayName = 'Button'

export default Button