import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { Suspense } from 'react';
import PageContainer from '@/components/layout/page-container';
import { getQueryClient } from '@/lib/query-client';
import { pokemonOptions } from '@/features/react-query-demo/api/queries';
import { PokemonInfo } from '@/features/react-query-demo/components/pokemon-info';
import { PokemonSkeleton } from '@/features/react-query-demo/components/pokemon-skeleton';

export const metadata = {
  title: 'Example Dashboard: React Query'
};

export default function ExampleReactQueryPage() {
  const queryClient = getQueryClient();
  void queryClient.prefetchQuery(pokemonOptions(25));

  return (
    <PageContainer
      pageTitle='React Query'
      pageDescription='Server prefetch + hydration + suspense query pattern in a public example route.'
    >
      <HydrationBoundary state={dehydrate(queryClient)}>
        <Suspense fallback={<PokemonSkeleton />}>
          <PokemonInfo />
        </Suspense>
      </HydrationBoundary>
    </PageContainer>
  );
}