import { Outlet } from 'react-router'

import { FooterLinks } from '~/layouts/footer-links'
import { FooterNewsletter } from '~/layouts/footer-newsletter'
import { HeaderMenu } from '~/layouts/header-menu'
import { HeaderTop } from '~/layouts/header-top'

const NewsLayout = () => {
  return (
    <main className="relative min-h-dvh bg-[#ECECEC]">
      <header>
        <HeaderTop />
        <HeaderMenu />
      </header>
      <div className="grid sm:mx-[50px] sm:my-[25px] sm:gap-y-[25px]">
        <img
          src="/images/banner.png"
          alt="banner"
          className="h-[50px] w-full object-fill sm:h-[100px] sm:object-contain"
        />
        <Outlet />
      </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>
    </main>
  )
}

export default NewsLayout