'use client';

import { Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function AppBootstrapScreen({
  error,
  onRetry
}: {
  error?: string | null;
  onRetry?: () => void;
}) {
  return (
    <div className="fixed inset-0 z-[120] flex min-h-screen flex-col items-center justify-center bg-white px-6">
      {error ? (
        <>
          <p className="max-w-md text-center text-base font-medium text-[#101828]">{error}</p>
          <p className="mt-2 max-w-sm text-center text-sm text-[#667085]">
            Сервер авторизации временно недоступен. Обычно помогает повтор через несколько секунд.
          </p>
        </>
      ) : (
        <>
          <Loader2 className="h-10 w-10 animate-spin text-[#3390ec]" aria-hidden />
          <p className="mt-5 text-base font-medium text-[#101828]">Подключение к серверу</p>
          <p className="mt-2 max-w-sm text-center text-sm text-[#667085]">
            Подготавливаем ваш профиль и сервисы. Это займёт несколько секунд.
          </p>
        </>
      )}
      {onRetry ? (
        <Button className="mt-6 rounded-xl" variant={error ? 'default' : 'secondary'} onClick={onRetry}>
          Повторить подключение
        </Button>
      ) : null}
    </div>
  );
}