import * as React from "react";
import { cn } from "@/design-system/utils/cn";

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 = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      variant = "primary",
      size = "md",
      isLoading = false,
      leftIcon,
      rightIcon,
      children,
      disabled,
      ...props
    },
    ref,
  ) => {
    const variantStyles = {
      primary:
        "bg-[#00ffcc] text-[#121212] hover:bg-[#00e6b8] shadow-[0_0_10px_rgba(0,255,204,0.3)]",
      secondary: "bg-[#1e1e1e] text-[#e1e1e1] hover:bg-[#2c2c2c]",
      outline:
        "bg-transparent border-2 border-[#00ffcc] text-[#00ffcc] hover:bg-[#00ffcc]/10",
      ghost:
        "bg-transparent text-[#a0a0a0] hover:text-[#e1e1e1] hover:bg-[#1e1e1e]/50",
      danger:
        "bg-[#ff5252] text-[#121212] hover:bg-[#ff1a1a] shadow-[0_0_10px_rgba(255,82,82,0.3)]",
    };

    const sizeStyles = {
      sm: "h-8 px-3 py-1.5 text-xs gap-1.5",
      md: "h-10 px-4 py-2 text-sm gap-2",
      lg: "h-12 px-6 py-3 text-base gap-2.5",
    };

    return (
      <button
        className={cn(
          "inline-flex items-center justify-center rounded-xl font-black uppercase tracking-widest transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00ffcc] focus-visible:ring-offset-2 focus-visible:ring-offset-[#121212] disabled:pointer-events-none disabled:opacity-50",
          variantStyles[variant as keyof typeof variantStyles],
          sizeStyles[size as keyof typeof sizeStyles],
          isLoading && "cursor-not-allowed",
          className,
        )}
        ref={ref}
        disabled={disabled || isLoading}
        {...props}
      >
        {isLoading ? (
          <svg
            className="animate-spin h-4 w-4"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
        ) : (
          <>
            {leftIcon && <span className="flex-shrink-0">{leftIcon}</span>}
            <span className={cn(isLoading && "opacity-0")}>{children}</span>
            {rightIcon && <span className="flex-shrink-0">{rightIcon}</span>}
          </>
        )}
      </button>
    );
  },
);

Button.displayName = "Button";

export { Button };
