import {Suspense} from 'react'
import PropTypes from 'prop-types'
import TeksDrawerLoader from '../../components/teks/teks-drawer-loader'
import {CurrentTrackProvider} from '../../components/teks/current-track-context'
import Loading from './loading'

const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`

export const metadata = {
  title: siteName,
  description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
  openGraph: {
    title: siteName,
    description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
    url: `${siteUrl}/paroles`,
    siteName,
    images: [
      {
        url: `${siteUrl}/logo-512x512.png`,
        width: 512,
        height: 512
      }
    ],
    locale: 'fr_FR',
    type: 'website'
  },
  twitter: {
    site: twitterHandle,
    card: 'summary_large_image',
    title: siteName,
    description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
    creator: twitterHandle,
    images: {
      url: `${siteUrl}/logo-512x512.png`,
      alt: `${siteName} Logo`,
    },
  }
}

export default function PawolLayout({children}) {
  return (
    <CurrentTrackProvider>
      <Suspense fallback={<Loading />}>
        <TeksDrawerLoader />
      </Suspense>
      <section>
        {children}
      </section>
    </CurrentTrackProvider>
  )
}

PawolLayout.propTypes = {
  children: PropTypes.node.isRequired
}