"use client";

import { MosaicLogo } from "./MosaicLogo";
import type { ReactElement } from "react";

export interface MosaicSpinnerProps {
  /** Width and height of the logo in pixels (default: 36) */
  size?: number;
  /** Seconds for one full rotation (default: 20) */
  spinDuration?: number;
  /** Optional text label displayed below the spinner */
  label?: string;
  /**
   * When true, wraps the spinner in a full-page centered overlay.
   * When false (default), renders inline.
   */
  fullPage?: boolean;
  /** Additional CSS classes for the wrapper element */
  className?: string;
}

/**
 * MosaicSpinner wraps MosaicLogo with spinning enabled.
 * It can be used as a full-page loading overlay or as an inline indicator.
 */
export function MosaicSpinner({
  size = 36,
  spinDuration = 20,
  label,
  fullPage = false,
  className = "",
}: MosaicSpinnerProps): ReactElement {
  const inner = (
    <div className={`flex flex-col items-center gap-3 ${className}`}>
      <MosaicLogo size={size} spinning spinDuration={spinDuration} />
      {label !== undefined && label !== "" && (
        <span className="text-sm text-gray-500">{label}</span>
      )}
    </div>
  );

  if (fullPage) {
    return <div className="flex min-h-screen items-center justify-center">{inner}</div>;
  }

  return inner;
}

export default MosaicSpinner;