"use client";

import { ButtonHTMLAttributes, forwardRef } from "react";

export type ButtonVariant = "primary" | "outline" | "teal" | "pill";
export type ButtonSize = "sm" | "md" | "lg";

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  function Button(
    { variant = "primary", size = "md", loading = false, disabled, children, className = "", ...props },
    ref
  ) {
    const isDisabled = disabled || loading;
    return (
      <button
        ref={ref}
        disabled={isDisabled}
        className={`bb-btn bb-btn-${size} bb-btn-${variant} ${className}`.trim()}
        {...props}
      >
        {loading && (
          <span
            style={{
              width: 13,
              height: 13,
              border: "2px solid currentColor",
              borderTopColor: "transparent",
              borderRadius: "50%",
              display: "inline-block",
              animation: "bb-spin 0.65s linear infinite",
              flexShrink: 0,
            }}
          />
        )}
        {children}
      </button>
    );
  }
);