import { Metadata } from 'next';
import { PublicLayout } from '@/components/layout/public/public-layout';
import { createHelpers } from '@/lib/trpc/server';
import { TopicsEnum } from '@/config/enums';
import CityList from '@/components/shared/city-list';
import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
import { generateMetaTags } from '@/lib/meta-tags/server';

export const metadata: Metadata = {
  title: 'Byens bolig | Magasinet KBH',
  description: 'Byens bolig'
};

export default async function CityHousePage() {
  const helpers = await createHelpers();

  await Promise.all([
    helpers.posts.list.prefetch({
      with: ['primaryTag'],
      topic: TopicsEnum.CITY_HOUSE,
      limit: 6
    }),
    helpers.posts.count.prefetch({
      topic: TopicsEnum.CITY_HOUSE
    })
  ]);

  const { jsonLd } = await generateMetaTags({
    title: 'Byens bolig',
    description: 'Byens bolig',
    author: 'Magasinet KBH',
    created: new Date(),
    url: 'https://magasinetkbh.dk/byens-bolig',
  });

  return (
    <>
      {jsonLd && (
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <HydrationBoundary state={dehydrate(helpers.queryClient)}>
        <PublicLayout>
          <section className='mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x'>
            <div className='flex flex-col xl:flex-row'>
              <div className='shrink-0 xl:w-68'>
                <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
                  seneste byens bolig
                </h2>
              </div>
              <div className='w-full'>
                <CityList type={TopicsEnum.CITY_HOUSE} />
              </div>
            </div>
          </section>
        </PublicLayout>
      </HydrationBoundary>
    </>
  );
}