// <Skeleton> — one grey placeholder shape that shimmers, for a view that is
// waiting on the server. A component that shows loaded data has a twin that
// fills the same layout with these shapes instead of its sub components (see
// `AgentCardSkeleton`), so the page does not jump when the data lands.
//
// <SkeletonRegion> wraps a group of them for assistive tech: the shapes
// themselves are `aria-hidden`, and the region says once that something is
// loading.
import type { ComponentChildren } from "preact";
import "./Skeleton.css";

export type SkeletonShape = "line" | "circle" | "block";

export function Skeleton({
  shape = "line",
  width,
  height,
  class: extraClass,
}: {
  /** `line`: a rounded bar the height of a line of text; `circle`; `block`: a
   * rounded square that fills `width` × `height`. */
  shape?: SkeletonShape;
  /** Any CSS length; a line fills its row when this is left out. */
  width?: string;
  height?: string;
  class?: string;
}) {
  const classes = ["ui-skeleton", `ui-skeleton-${shape}`, extraClass]
    .filter(Boolean)
    .join(" ");
  return <span class={classes} style={{ width, height }} aria-hidden="true" />;
}

export function SkeletonRegion({
  label,
  children,
}: {
  /** What is loading, as a screen reader says it: "the agents". */
  label: string;
  children: ComponentChildren;
}) {
  return (
    <div class="ui-skeleton-region" role="status">
      <span class="ui-skeleton-label">loading {label}</span>
      {children}
    </div>
  );
}

const LINE_WIDTHS = ["90%", "75%", "85%", "60%"];

/** A few lines of text, for a block of prose or a list still loading. */
export function SkeletonLines({
  label,
  count = 3,
}: {
  /** What is loading, as a screen reader says it. */
  label: string;
  count?: number;
}) {
  return (
    <SkeletonRegion label={label}>
      <div class="ui-skeleton-lines">
        {Array.from({ length: count }, (_, i) => (
          <Skeleton key={i} width={LINE_WIDTHS[i % LINE_WIDTHS.length]} />
        ))}
      </div>
    </SkeletonRegion>
  );
}