import type { ReactNode } from 'react'
import Header from '@/components/layout/header'
import Footer from '@/components/layout/footer'
import CTASection from '@/components/blocks/cta-section/cta-section'
import { headers } from 'next/headers'
import { fetchHomepageData } from '@/lib/api'

const PagesLayout = async ({ children }: Readonly<{ children: ReactNode }>) => {
  const headersList = await headers()
  const host = headersList.get('host') || ''
  const domainTheme = host

  const data = await fetchHomepageData(domainTheme)
  const domain = data?.domain
  const menu = data?.menu || []

  const headerMenu = menu
    .filter((m: any) => m.type === 1 && m.status === 1)
    .sort((a: any, b: any) => (a.position || 0) - (b.position || 0))

  const footerMenu = menu
    .filter((m: any) => m.type === 2 && m.status === 1)
    .sort((a: any, b: any) => (a.position || 0) - (b.position || 0))

  return (
    <div className='flex min-h-screen w-full flex-col'>
      {/* Header Section */}
      <Header domain={domain} menu={headerMenu} />

      {/* Main Content */}
      <main className='flex flex-col flex-1'>{children}</main>

      <CTASection domain={domain} />

      {/* Footer Section */}
      <Footer domain={domain} menu={footerMenu} />
    </div>
  )
}

export default PagesLayout