interface AdminLoadingStateProps {
  message?: string;
  fullScreen?: boolean;
}

export default function AdminLoadingState({
  message = "Loading...",
  fullScreen = false,
}: AdminLoadingStateProps) {
  const containerClass = fullScreen
    ? "fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80"
    : "flex items-center justify-center py-12";

  return (
    <div className={containerClass}>
      <div className="flex flex-col items-center gap-3">
        <svg
          className="h-6 w-6 animate-spin text-indigo-400"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle
            className="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            strokeWidth="4"
          />
          <path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
          />
        </svg>
        {message && <p className="text-sm text-slate-400">{message}</p>}
      </div>
    </div>
  );
}

export function AdminSkeleton({ className = "" }: { className?: string }) {
  return (
    <div
      className={`animate-pulse rounded bg-slate-800/60 ${className}`}
      role="status"
    >
      <span className="sr-only">Loading...</span>
    </div>
  );
}

export function AdminCardSkeleton() {
  return (
    <div className="rounded-xl border border-slate-800 bg-slate-900 p-6">
      <AdminSkeleton className="mb-4 h-6 w-3/4" />
      <AdminSkeleton className="mb-2 h-4 w-full" />
      <AdminSkeleton className="h-4 w-5/6" />
    </div>
  );
}
