import Container from 'components/BlogContainer'
import BlogHeader from 'components/BlogHeader'
import GalleryBody from 'components/GalleryBody'
import GalleryHeader from 'components/GalleryHeader'
import GalleryPageHead from 'components/GalleryPageHead'
import GalleryTitle from 'components/GalleryTitle'
import Layout from 'components/Layout'
import MoreGalleries from 'components/MoreGalleries'
import SectionSeparator from 'components/SectionSeparator'
import * as demo from 'lib/demo.data'
import type { Gallery, Settings } from 'lib/sanity.queries'
import Head from 'next/head'
import { notFound } from 'next/navigation'

export interface GalleryPageProps {
  preview?: boolean
  loading?: boolean
  post: Gallery
  morePosts: Gallery[]
  settings: Settings
}

const NO_POSTS: Gallery[] = []

export default function GalleryPage(props: GalleryPageProps) {
  const { preview, loading, morePosts = NO_POSTS, post, settings } = props
  const { title = demo.title } = settings || {}

  const slug = post?.slug

  if (!slug && !preview) {
    notFound()
  }

  return (
    <>
      <Head>
        <GalleryPageHead settings={settings} post={post} />
      </Head>

      <Layout preview={preview} loading={loading}>
        <Container>
          <BlogHeader title={title} level={2} />
          {preview && !post ? (
            <GalleryTitle>Loading…</GalleryTitle>
          ) : (
            <>
              <article>
                <GalleryHeader
                  title={post.title}
                  coverImage={post.coverImage}
                  date={post.date}
                  author={post.author}
                />
                <GalleryBody content={post.content} />
              </article>
              <SectionSeparator />
              {morePosts?.length > 0 && <MoreGalleries posts={morePosts} />}
            </>
          )}
        </Container>
      </Layout>
    </>
  )
}
