import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { adminComponentStyles } from "./design-system";

interface AdminButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "ghost" | "danger" | "success";
  size?: "sm" | "md" | "lg";
  icon?: IconDefinition;
  iconPosition?: "left" | "right";
  isLoading?: boolean;
  children: React.ReactNode;
}

export default function AdminButton({
  variant = "primary",
  size = "md",
  icon,
  iconPosition = "left",
  isLoading = false,
  disabled,
  className = "",
  children,
  ...props
}: AdminButtonProps) {
  const baseStyles = adminComponentStyles.button.base;
  const variantStyles = {
    primary: adminComponentStyles.button.primary,
    secondary: adminComponentStyles.button.secondary,
    ghost: adminComponentStyles.button.ghost,
    danger: adminComponentStyles.button.danger,
    success: adminComponentStyles.button.success,
  }[variant];

  const sizeStyles = {
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2 text-sm",
    lg: "px-5 py-2.5 text-base",
  }[size];

  const isDisabled = disabled || isLoading;

  return (
    <button
      className={`${baseStyles} ${variantStyles} ${sizeStyles} ${
        isDisabled ? adminComponentStyles.button.disabled : ""
      } ${className}`}
      disabled={isDisabled}
      {...props}
    >
      {isLoading ? (
        <>
          <svg
            className="h-4 w-4 animate-spin"
            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>
          <span>Loading...</span>
        </>
      ) : (
        <>
          {icon && iconPosition === "left" && (
            <FontAwesomeIcon icon={icon} className="h-3.5 w-3.5" />
          )}
          <span>{children}</span>
          {icon && iconPosition === "right" && (
            <FontAwesomeIcon icon={icon} className="h-3.5 w-3.5" />
          )}
        </>
      )}
    </button>
  );
}
