import { Suspense } from 'react';
import { RouterProvider } from 'react-router';

import { Card } from '@/components/ui/primitives';
import { SkeletonLines } from '@/components/ui/Skeleton';
import { router } from '@/router';
import '@/i18n';

/** Заглушка на время загрузки ленивых страниц: скелетон вместо пустоты. */
export function RouteFallback() {
  return (
    <div className="flex min-h-full items-center justify-center p-6">
      <Card className="w-full max-w-md">
        <SkeletonLines rows={4} />
      </Card>
    </div>
  );
}

export function App() {
  return (
    <Suspense fallback={<RouteFallback />}>
      <RouterProvider router={router} />
    </Suspense>
  );
}