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

const contactContent = {
  title: 'Kontakt',
  description: 'Sådan kommer du i kontakt med Magasinet KBH',
  author: 'Magasinet KBH',
  created: new Date('2015-09-16T15:57:11+02:00'),
  modified: new Date('2020-07-24T08:45:36+02:00'),
  url: 'https://magasinetkbh.dk/kontakt',
};

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

export default async function ContactsPage() {
  const helpers = await createHelpers();
  const data = await helpers.page.get.fetch({
    slug: 'kontakt'
  });
  const { jsonLd } = await generateMetaTags(contactContent);

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <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='w-68 shrink-0'>
            <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
              kontakt
            </h2>
          </div>
          <div className='w-full'>
            {data?.title && (
              <h1 className='py-4 text-xl font-bold md:py-6 md:text-3xl'>
                {data.title}
              </h1>
            )}
            <PostContentRenderer nodeContent={data?.content} />
          </div>
        </div>
      </section>
    </PublicLayout>
  );
}