CommonPage.tsx

import type React from 'react';

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { useContentfulInspectorMode, useContentfulLiveUpdates } from '@contentful/live-preview/react';

import type { SitemapItem, PageData } from '@/helpers/types';

import { LOCALE } from '@/helpers/constants';
import pageRenderOptions from '@/helpers/rendering';

import Hero from '@/components/Hero/Hero';
import { Breadcrumbs, SEO } from '@/components';

interface Props {
  page: SitemapItem,
  parent?: SitemapItem,
  breadcrumbs: Array<SitemapItem>,
  data: PageData,
  children?: React.JSX.Element | React.JSX.Element[],
  wide?: boolean,
}

const CommonPage = ({
  page,
  parent,
  breadcrumbs,
  data,
  children,
  wide = false,
}: Props) => {
  const backgroundImage = data?.background?.url ? `url(${data.background.url})` : undefined;

  const previewProps = useContentfulInspectorMode();
  const previewData = useContentfulLiveUpdates({
    sys: { id: data.id },
    fields: { content: { [LOCALE]: data.content } },
  });

  return (
    <>
      <SEO
        page={{ ...page, description: data.description ?? undefined }}
        breadcrumbs={breadcrumbs}
        images={data?.image ? [{
          url: data?.image.url,
          width: data?.image.width,
          height: data?.image.height,
        }] : undefined}
      />

      <Hero
        title={page.title}
        subtitle={parent?.title}
        background={data?.image?.url}
        wide={wide}
      />

      <Breadcrumbs
        items={breadcrumbs}
        style={wide ? 'wide' : 'normal'}
      />

      <article
        className={`content ${wide ? 'wide' : ''}`}
        style={{ backgroundImage }}
        {...previewProps({
          entryId: previewData.sys.id as string,
          fieldId: 'content',
        })}
      >
        {data.content && documentToReactComponents(data.content, pageRenderOptions)}
        {children}
      </article>
    </>
  );
};

export default CommonPage;