import React, { type FC, type PropsWithChildren } from 'react'

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

export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
  return (
    <main className="relative min-h-dvh bg-[#ECECEC]">
      <header>
        <HeaderTop />
        <HeaderMenu />
      </header>
      <div className="mx-[50px] my-[25px] grid gap-y-[25px]">
        <img
          src="/images/banner.png"
          alt="banner"
          className="h-[100px] w-full object-contain"
        />
        <div className="border-[.2px] border-black bg-white p-[30px]">
          {children}
        </div>
      </div>
      <footer className="absolute bottom-0 grid w-full grid-cols-5 gap-32 bg-[#2E2F7C] px-16 py-20 text-white">
        <FooterNewsletter />
        <FooterLinks />
      </footer>
    </main>
  )
}