import { forwardRef } from "react";
import { cn } from "@/lib/cn";
import { SpinnerIcon } from "./icons";

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
  size?: "sm" | "md" | "lg";
  isLoading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      children,
      className,
      variant = "primary",
      size = "md",
      isLoading = false,
      leftIcon,
      rightIcon,
      disabled,
      ...props
    },
    ref
  ) => {
    const isDisabled = disabled || isLoading;

    const baseStyles = cn(
      "inline-flex items-center justify-center gap-2",
      "font-medium rounded-xl",
      "transition-all duration-200",
      "focus:outline-none focus:ring-2 focus:ring-offset-2",
      "disabled:opacity-50 disabled:cursor-not-allowed"
    );

    const variantStyles = {
      primary: cn(
        "bg-gradient-to-b from-[#667EEA] to-[#764BA2]",
        "text-white shadow-button-glow",
        "hover:opacity-90 active:scale-[0.98]",
        "focus:ring-[#667EEA]/60"
      ),
      secondary: cn(
        "bg-primary-100 text-primary-700",
        "hover:bg-primary-200",
        "focus:ring-primary-500"
      ),
      outline: cn(
        "border border-slate-200 bg-white",
        "text-content",
        "hover:bg-slate-50",
        "focus:ring-slate-400"
      ),
      ghost: cn(
        "text-content-secondary",
        "hover:bg-slate-100 hover:text-content",
        "focus:ring-slate-400"
      ),
      danger: cn(
        "border border-red-200 bg-white",
        "text-red-600",
        "hover:bg-red-50",
        "focus:ring-red-500"
      ),
    };

    const sizeStyles = {
      sm: "px-3 py-1.5 text-sm",
      md: "px-4 py-2.5 text-sm",
      lg: "px-6 py-3 text-base",
    };

    return (
      <button
        ref={ref}
        className={cn(
          baseStyles,
          variantStyles[variant],
          sizeStyles[size],
          className
        )}
        disabled={isDisabled}
        {...props}
      >
        {isLoading ? (
          <>
            <SpinnerIcon size={16} />
            <span>{children}</span>
          </>
        ) : (
          <>
            {leftIcon}
            <span>{children}</span>
            {rightIcon}
          </>
        )}
      </button>
    );
  }
);

Button.displayName = "Button";

export { Button };