import {Suspense} from 'react'
import {notFound} from 'next/navigation'
import {jwennTeks} from '../../lib/oki-api'
import TeksDrawer from '../../components/teks/teks-drawer'
import Loading from './loading'

export const metadata = {
  title: 'OKI | Organisation KA Internationale. Paroles et traductions.',
  description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
  openGraph: {
    title: 'OKI | Organisation KA Internationale. Paroles et traductions.',
    description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
    url: 'https://oki.re/paroles',
    siteName: 'OKI | Organisation KA Internationale. Paroles et traductions.',
    images: [
      {
        url: 'htts://oki.re/logo-512x512.png',
        width: 512,
        height: 512
      }
    ],
    locale: 'fr_FR',
    type: 'website'
  },
  twitter: {
    site: '@OrganisationKA',
    card: 'summary_large_image',
    title: 'OKI | Organisation KA Internationale. Paroles et traductions.',
    description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
    creator: '@OrganisationKA',
    images: {
      url: 'https://oki.re/logo-512x512.png',
      alt: 'OKI Logo',
    },
  }
}

async function jwennDotDone() {
  const teks = await jwennTeks()

  if (!teks) {
    notFound()
  }

  return teks
}

export default async function PawolLayout({children}) {
  const teks = await jwennDotDone()

  return (
    <>
      <Suspense fallback={<Loading />}>
        <TeksDrawer paroles={teks} />
      </Suspense>
      <section>
        {children}
      </section>
    </>
  )
}