import type { ReactNode } from "react";

export function BeamBar({
  className = "",
  width = 140,
  height = 4,
}: {
  className?: string;
  width?: number | string;
  height?: number;
}) {
  return (
    <div
      className={`tn-beam-bar ${className}`}
      style={{ width, height }}
      role="progressbar"
      aria-label="加载中"
    />
  );
}

export function BeamLoading({
  text,
  className = "",
  width,
}: {
  text?: ReactNode;
  className?: string;
  width?: number | string;
}) {
  return (
    <div className={`tn-beam-loading ${className}`} role="status" aria-live="polite">
      <BeamBar width={width} />
      {text && <span className="tn-beam-text">{text}</span>}
    </div>
  );
}

export default BeamLoading;