import { LucideIcon, Loader2 } from "lucide-react";
import { useTranslation } from "react-i18next";

interface LoadingScreenProps {
  /** Optional message to display under the spinner */
  message?: string;
  /** Optional icon to display in the center of the spinner. Defaults to a generic loading icon */
  icon?: LucideIcon;
  /** Whether to show the full-screen gradient background. Defaults to true */
  fullScreen?: boolean;
}

/**
 * A reusable loading screen component with an animated circular spinner.
 * Used throughout the application for consistent loading states.
 */
export function LoadingScreen({
  message,
  icon: Icon = Loader2,
  fullScreen = true
}: LoadingScreenProps) {
  const { t } = useTranslation();

  const content = (
    <div className="w-full max-w-md text-center">
      <div className="relative mx-auto w-16 h-16 mb-6">
        {/* Outer static ring */}
        <div className="absolute inset-0 rounded-full border-4 border-[#52b3d0]/20"></div>
        {/* Spinning ring */}
        <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-[#52b3d0] animate-spin"></div>
        {/* Inner circle with icon */}
        <div className="absolute inset-2 rounded-full bg-[#52b3d0]/10 flex items-center justify-center">
          <Icon className="w-6 h-6 text-[#52b3d0]" />
        </div>
      </div>
      <p className="text-slate-400">{message || t('common.loading')}</p>
    </div>
  );

  if (fullScreen) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center px-4">
        {content}
      </div>
    );
  }

  return (
    <div className="flex items-center justify-center py-12 px-4">
      {content}
    </div>
  );
}
