import { PULL_REFRESH_THRESHOLD } from "./pull-to-refresh.js";

export function PullToRefreshIndicator({ pull, direction }) {
  const visible = pull.refreshing || pull.distance > 0;
  return <div className={`pull-refresh-indicator ${direction} ${pull.active ? "pulling" : ""} ${pull.armed ? "armed" : ""} ${pull.refreshing ? "refreshing" : ""}`}
    style={{ "--pull-distance": `${pull.distance}px`, "--pull-progress": Math.min(pull.distance / PULL_REFRESH_THRESHOLD, 1) }} role="status" aria-live="polite"
    aria-label={pull.refreshing ? "Refreshing" : pull.armed ? "Release to refresh" : "Pull to refresh"} aria-hidden={!visible}>
    <svg className="pull-refresh-spinner" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M21 12a9 9 0 1 1-2.64-6.36L21 8" />
      <path d="M21 3v5h-5" />
    </svg>
  </div>;
}
