import { type PropsWithChildren } from 'react'
import { Toaster } from 'react-hot-toast'

import { DialogSuccess } from '~/components/dialog/success'
import { useNewsContext } from '~/contexts/news'
import { Banner } from '~/layouts/news/banner'
import { DialogForgotPassword } from '~/layouts/news/dialog-forgot-password'
import { DialogLogin } from '~/layouts/news/dialog-login'

import { DialogRegister } from './dialog-register'
import { DialogSubscribePlan } from './dialog-subscribe-plan'
import { FooterLinks } from './footer-links'
import { FooterNewsletter } from './footer-newsletter'
import { HeaderMenu } from './header-menu'
import { HeaderTop } from './header-top'

export const NewsDefaultLayout = (properties: PropsWithChildren) => {
  const { children } = properties
  const { isSuccessOpen, setIsSuccessOpen } = useNewsContext()
  return (
    <main className="relative min-h-dvh bg-[#ECECEC]">
      <header>
        <HeaderTop />
        <HeaderMenu />
      </header>
      <div className="sm:mx-[50px] sm:my-[25px] sm:grid sm:gap-y-[25px]">
        <Banner />
        {children}
      </div>

      <footer className="grid w-full grid-cols-1 gap-6 bg-[#2E2F7C] px-5 py-20 text-white sm:grid-cols-5 sm:gap-16 sm:px-16">
        <FooterNewsletter />
        <FooterLinks />
      </footer>

      <Toaster />
      <DialogLogin />
      <DialogRegister />
      <DialogForgotPassword />
      <DialogSubscribePlan />
      <DialogSuccess
        isOpen={isSuccessOpen}
        onClose={() => {
          setIsSuccessOpen(undefined)
        }}
      />
    </main>
  )
}