import { cn } from "@core/lib/utils";
import * as React from "react";

export interface CustomButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "info" | "error";
  disabled?: boolean;
}

const CustomButton = React.forwardRef<HTMLButtonElement, CustomButtonProps>(
  ({ className, variant = "primary", disabled, children, ...props }, ref) => {
    return (
      <button
        className={cn(
          "inline-flex items-center justify-center gap-2 rounded-lg px-6 py-3 text-sm font-medium transition-all duration-200 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
          {
            // Primary variant
            "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600 active:bg-blue-800":
              variant === "primary" && !disabled,

            // Info variant
            "bg-white text-black hover:bg-gray-100 focus-visible:ring-gray-300 active:bg-gray-200":
              variant === "info" && !disabled,

            // Error variant
            "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-600 active:bg-red-800":
              variant === "error" && !disabled,

            // Disabled state
            "bg-gray-300 text-gray-500 cursor-not-allowed": disabled,
          },
          className
        )}
        disabled={disabled}
        ref={ref}
        {...props}
      >
        {children}
      </button>
    );
  }
);
CustomButton.displayName = "CustomButton";

export { CustomButton };