/**
 * Loading state: spinner and translated "Loading…" text.
 * Optionally wraps content in a container for calendar placeholder use.
 * Ported from webapp CSS states.css .loading and index.html loading element.
 */

"use client";

import { useTranslation } from "@/i18n/use-translation";
import { cn } from "@/lib/utils";

export interface LoadingStateProps {
  /** Optional class for the container. */
  className?: string;
  /** If true, render a compact skeleton-style placeholder (e.g. for calendar area). */
  asPlaceholder?: boolean;
}

/**
 * Spinner icon matching original .loading__spinner (accent color, reduced-motion safe).
 */
function LoadingSpinner({ className }: { className?: string }) {
  return (
    <span
      className={cn(
        "block size-5 shrink-0 rounded-full border-2 border-transparent border-t-accent motion-reduce:animate-none",
        "animate-spin",
        className
      )}
      aria-hidden
    />
  );
}

/**
 * Full loading view: flex center, spinner + "Loading…" text.
 */
export function LoadingState({ className, asPlaceholder }: LoadingStateProps) {
  const { t } = useTranslation();

  if (asPlaceholder) {
    return (
      <div
        className={cn(
          "flex min-h-[120px] items-center justify-center rounded-lg bg-muted/30",
          className
        )}
        role="status"
        aria-live="polite"
        aria-label={t("loading")}
      >
        <LoadingSpinner />
      </div>
    );
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-2.5 py-3 text-center text-muted-foreground",
        className
      )}
      role="status"
      aria-live="polite"
      aria-label={t("loading")}
    >
      <LoadingSpinner />
      <span className="loading__text">{t("loading")}</span>
    </div>
  );
}
