// karm.dev — Button component
// Variants: primary | secondary | accent | ghost
// Sizes: sm | md | lg

function Button({
  children,
  variant = 'primary',
  size = 'md',
  isLoading = false,
  onClick,
  type = 'button',
  style = {},
  ...props
}) {
  const cls = `btn btn-${variant} btn-${size}${isLoading ? ' is-loading' : ''}`;
  const { isLoading: _drop, ...rest } = props;
  return (
    <button
      type={type}
      className={cls}
      onClick={onClick}
      disabled={isLoading || props.disabled}
      style={style}
      {...rest}
    >
      {isLoading && <span className="btn-spinner" aria-hidden="true" />}
      <span>{children}</span>
    </button>
  );
}

window.Button = Button;