import Aside from "@/components/Current/Aside"
import Blocks from "@/components/Current/Blocks"
import Hero from "@/components/Current/Hero"
import Preamble from "@/components/Current/Preamble"
import Section from "@/components/Current/Section"
import SubnavMobile from "@/components/Current/SubnavMobile"

import styles from "./contentPage.module.css"

import type { ContentPageProps } from "@/types/components/current/contentPage"

export default function ContentPage({ data }: ContentPageProps) {
  const page = data.all_current_blocks_page.items[0]
  const images = page.hero?.imagesConnection
  const breadcrumbs = page.breadcrumbs.parents
  const parent = breadcrumbs.at(-1)

  return (
    <>
      {images?.totalCount ? <Hero images={images.edges} /> : null}
      <main className={styles.wrapper} id="maincontent" role="main">
        <input
          id="lbl-personalized-areas"
          name="lbl-personalized-areas"
          type="hidden"
          value=""
        />
        <SubnavMobile
          breadcrumbs={breadcrumbs}
          parent={parent}
          title={page.breadcrumbs.title}
        />
        <Preamble
          breadcrumbs={breadcrumbs}
          breadcrumbParent={parent}
          breadcrumbTitle={page.breadcrumbs.title}
          preamble={page.preamble}
          title={page.title}
        />
        <Section>
          <Blocks blocks={page.blocks} />
          <Aside blocks={page.aside} />
        </Section>
      </main>
    </>
  )
}