import React from "react";

const SIZES = { xs: "o-btn--xs", sm: "o-btn--sm", default: "", lg: "o-btn--lg", xl: "o-btn--xl", icon: "o-btn--icon", "icon-xs": "o-btn--icon-xs", "icon-sm": "o-btn--icon-sm", "icon-lg": "o-btn--icon-lg", "icon-xl": "o-btn--icon-xl" };

export function Button({ variant = "default", size = "default", loading = false, disabled, className = "", children, render, ...props }) {
  const cls = ["o-btn", "o-btn--" + variant, SIZES[size] || "", className].filter(Boolean).join(" ");
  const content = (
    <>
      {children}
      {loading ? (
        <svg className="o-btn__spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" data-slot="button-loading-indicator" aria-label="Loading"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
      ) : null}
    </>
  );
  const shared = { className: cls, "data-slot": "button", "data-loading": loading ? "" : undefined, children: content, ...props };
  if (render) return React.cloneElement(render, shared);
  return <button type="button" disabled={Boolean(loading || disabled)} aria-disabled={loading || undefined} {...shared} />;
}
