import { __ } from '@/lib/i18n';

/**
 * What a screen shows while it is waiting.
 *
 * A line of text cannot say whether a wait is progressing or has stalled, and
 * on a slow site these waits are long enough for that to matter. A spinner is
 * motion: it keeps saying "still going" without a word changing.
 *
 * Two shapes, because the waits are two shapes. `Loading` fills a region that
 * has nothing in it yet — the workflow table, the template grid, the editor
 * before its graph arrives. `LoadingInline` sits in a line of existing content,
 * such as one row of a dropdown that is fetching its options.
 *
 * The label is always rendered, not hidden: "Loading templates…" tells someone
 * what is being waited on, which a spinner alone cannot.
 */

interface SpinnerProps {
  /** Diameter in pixels. The ring's thickness scales with it. */
  size?: number;
}

export function Spinner({ size = 18 }: SpinnerProps) {
  return (
    <span
      className="flowwp-spinner"
      style={{ width: size, height: size, borderWidth: Math.max(2, Math.round(size / 9)) }}
      aria-hidden="true"
    />
  );
}

interface LoadingProps {
  /** What is being waited on, e.g. "Loading templates…". */
  label?: string;
  /** Fill the height of a whole screen rather than sitting at the top of a region. */
  tall?: boolean;
}

/** A centred spinner for a region with nothing in it yet. */
export function Loading({ label, tall = false }: LoadingProps) {
  // Defaulted in the body, not the signature: a default argument is evaluated
  // on every call, but writing __() there would read oddly beside the rest.
  const text = label ?? __('Loading…', 'flowwp-workflow-automation');

  return (
    <div className={`flowwp-loading${tall ? ' flowwp-loading--tall' : ''}`} role="status" aria-live="polite">
      <Spinner size={22} />
      <span className="flowwp-loading__label">{text}</span>
    </div>
  );
}

/** A spinner on one line, for a wait inside content that is already there. */
export function LoadingInline({ label }: LoadingProps) {
  const text = label ?? __('Loading…', 'flowwp-workflow-automation');

  return (
    <span className="flowwp-status" role="status" aria-live="polite">
      <Spinner size={14} />
      <span>{text}</span>
    </span>
  );
}