/**
 * Mawidi Demo Scheduler - Loading Spinner Component
 * Reusable loading indicator with bilingual support
 */

"use client";

import React from "react";

export interface LoadingSpinnerProps {
  /** Size of the spinner */
  size?: "sm" | "md" | "lg";
  /** Loading message to display */
  message?: string;
  /** Whether to show as fullscreen overlay */
  fullscreen?: boolean;
  /** Custom className for styling */
  className?: string;
}

const sizeClasses = {
  sm: "w-6 h-6 border-2",
  md: "w-10 h-10 border-3",
  lg: "w-16 h-16 border-4",
};

/**
 * LoadingSpinner Component
 *
 * Displays an animated spinner with optional message
 * Supports RTL layouts and dark mode
 *
 * @example
 * ```tsx
 * <LoadingSpinner size="md" message="Loading availability..." />
 * <LoadingSpinner fullscreen message="Submitting booking..." />
 * ```
 */
export default function LoadingSpinner({
  size = "md",
  message,
  fullscreen = false,
  className = "",
}: LoadingSpinnerProps) {
  const spinnerContent = (
    <div
      className={`flex flex-col items-center justify-center gap-4 ${className}`}
    >
      {/* Spinner animation */}
      <div
        className={`
          ${sizeClasses[size]}
          border-brand-green/30
          border-t-brand-green
          rounded-full
          animate-spin
          dark:border-brand-green/40
          dark:border-t-brand-green
        `}
        role="status"
        aria-live="polite"
        aria-label={message || "Loading"}
      />

      {/* Loading message */}
      {message && (
        <p
          className="
            text-sm
            text-brand-ink/70
            dark:text-white/70
            text-center
            max-w-xs
          "
        >
          {message}
        </p>
      )}

      {/* Screen reader only text */}
      <span className="sr-only">Loading</span>
    </div>
  );

  if (fullscreen) {
    return (
      <div
        className="
          fixed
          inset-0
          z-50
          flex
          items-center
          justify-center
          bg-white/80
          dark:bg-brand-ink/80
          backdrop-blur-sm
        "
      >
        {spinnerContent}
      </div>
    );
  }

  return spinnerContent;
}
