import React from "react";
import webpImgLoading from "../assets/loading.webp";

interface LoadingSpinnerProps {
  message?: string;
  subMessage?: string;
  size?: "sm" | "md" | "lg";
}

/**
 * LoadingSpinner Component
 * Componente reutilizável para exibir estado de carregamento
 *
 * @param message - Mensagem principal de carregamento
 * @param subMessage - Mensagem secundária (opcional)
 * @param size - Tamanho do spinner (sm, md, lg)
 */
const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  message = "Carregando...",
  subMessage,
  size = "md",
}) => {
  const sizeClasses = {
    sm: "h-8 w-8 border-2",
    md: "h-16 w-16 border-4",
    lg: "h-24 w-24 border-4",
  };

  const innerSizeClasses = {
    sm: "h-4 w-4",
    md: "h-8 w-8",
    lg: "h-12 w-12",
  };

  return (
    <div className="flex flex-col items-center justify-center py-20">
      <div className="relative">
        {/* <div
          className={`animate-spin rounded-full ${sizeClasses[size]} border-slate-200 border-t-orange-500`}
        ></div>
        <div className="absolute inset-0 flex items-center justify-center">
          <div
            className={`${innerSizeClasses[size]} bg-orange-500 rounded-full animate-pulse`}
          ></div>
        </div> */}
        <picture>
          <source srcSet={webpImgLoading} type="image/webp" />
          <img src={webpImgLoading} alt="Loading" className="w-16 h-16" />
        </picture>
      </div>
      <p className="mt-6 text-slate-600 font-bold text-sm">{message}</p>
      {subMessage && (
        <p className="mt-2 text-slate-400 text-xs">{subMessage}</p>
      )}
    </div>
  );
};

export default LoadingSpinner;