import { PublicLayout } from '@/components/layout/public/public-layout';
import MagazineInfo from '@/components/shared/magazine-info';
import { Metadata } from 'next';
import { createHelpers } from '@/lib/trpc/server';
import PostContentRenderer from '@/components/tip-tap/tiptap-renderer/post-content-renderer';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const AD_CREATED_AT = new Date('2015-09-17T14:15:23+02:00');
const AD_MODIFIED_AT = new Date('2022-05-06T09:03:43+02:00');

const annonceringContent = {
  title: 'Annoncering',
  description: 'Annoncering på Magasinet KBH',
  author: 'Magasinet KBH',
  created: AD_CREATED_AT,
  modified: AD_MODIFIED_AT,
  url: 'https://magasinetkbh.dk/annoncering',
};

export async function generateMetadata(): Promise<Metadata> {
  return await buildMetadataFromContent(annonceringContent);
}

export default async function AnnonceringPage() {
  const helpers = await createHelpers();
  const [data, config] = await Promise.all([
    helpers.page.get.fetch({
      slug: 'annoncering'
    }),
    helpers.siteConfig.values.fetch()
  ]);

  const { jsonLd } = await generateMetaTags(annonceringContent);

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <section className='mx-auto flex w-full max-w-[1362px] grow flex-col items-center gap-8 p-3 md:p-[30px] xl:flex-row xl:items-start xl:gap-0 xl:border-x'>
        <div className='w-full'>
          <div className='flex flex-col xl:flex-row'>
            <div className='w-68 shrink-0'>
              <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
                {data?.title}
              </h2>
            </div>
            <div className='w-full'>
              <PostContentRenderer nodeContent={data?.content} />
            </div>
          </div>
        </div>
        <MagazineInfo
          subtitle='Vi elsker transparens, så her er real-time data relevante for annoncører'
          founded={false}
          subscribersCount={config.facebookPageSubscribersTotal}
          newsletterCount={config.newsletterSubscribersTotal}
        />
      </section>
    </PublicLayout>
  );
}