import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cx } from "./common";

export function Button({
  variant = "secondary", busy = false, disabled, className, children, ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "ghost" | "danger";
  busy?: boolean;
}) {
  return <button {...props} type={props.type ?? "button"}
    className={cx("ops-btn", `ops-btn-${variant}`, className)}
    disabled={disabled || busy} aria-busy={busy || undefined}>
    {busy && <span className="ops-spinner" aria-hidden="true" />}
    {children}
  </button>;
}

export function EmptyState({ title, children }: { title: string; children?: ReactNode }) {
  return <div className="ops-empty-state" role="status">
    <div className="ops-dim font-semibold">{title}</div>
    {children && <div className="ops-faint mt-1">{children}</div>}
  </div>;
}