import React from "react"

interface ButtonProps {
  children: React.ReactNode
  variant?: "primary" | "secondary" | "outline" | "gradient"
  size?: "sm" | "md" | "lg"
  className?: string
  onClick?: () => void
  type?: "button" | "submit" | "reset"
  disabled?: boolean
  fullWidth?: boolean
  icon?: React.ReactNode
  iconPosition?: "left" | "right"
}

export const Button: React.FC<ButtonProps> = ({
  children,
  variant = "primary",
  size = "md",
  className = "",
  onClick,
  type = "button",
  disabled = false,
  fullWidth = false,
  icon,
  iconPosition = "right",
}) => {
  const baseClasses =
    "inline-flex items-center justify-center font-semibold transition-all duration-300 ease-in-out cursor-pointer border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed min-h-[40px] sm:min-h-[48px] shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0"

  const variantClasses = {
    primary:
      "bg-gradient-to-r from-custom-1 to-custom-1-light text-custom-2 hover:from-custom-1-light hover:to-custom-1 focus:ring-custom-1 shadow-custom-1/25",
    secondary:
      "bg-black/30 backdrop-blur-sm text-custom-2 rounded-2xl overflow-hidden shadow-sm border border-custom-2/10",
    outline:
      "bg-transparent text-custom-3 border-2 border-custom-3/20 hover:border-custom-1 hover:text-custom-1 hover:bg-custom-1/5 focus:ring-custom-1",
    gradient:
      "bg-gradient-to-r from-custom-1 via-custom-1-light to-custom-1 text-custom-2 hover:from-custom-1-light hover:via-custom-1 hover:to-custom-1-light focus:ring-custom-1 shadow-custom-1/30 relative overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700",
  }

  const sizeClasses = {
    sm: "px-4 sm:px-5 py-2.5 sm:py-3 text-xs sm:text-sm",
    md: "px-6 sm:px-8 py-3 sm:py-3.5 text-sm sm:text-base",
    lg: "px-8 sm:px-12 py-4 sm:py-5 text-base sm:text-lg font-bold",
  }

  const widthClass = fullWidth ? "w-full" : ""

  const classes =
    `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${widthClass} ${className}`.trim()

  const renderContent = () => {
    if (!icon) return children

    if (iconPosition === "left") {
      return (
        <>
          <span className="mr-2">{icon}</span>
          {children}
        </>
      )
    }

    return (
      <>
        {children}
        <span className="ml-2">{icon}</span>
      </>
    )
  }

  return (
    <button
      type={type}
      className={classes}
      onClick={onClick}
      disabled={disabled}
    >
      {renderContent()}
    </button>
  )
}