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'
import type { NavigationSection } from '@/components/blocks/menu-navigation'
import Head from 'next/head'

const navigationData: NavigationSection[] = [
  {
    title: 'Home',
    href: '/#home'
  },
  {
    title: 'Categories',
    href: '/#categories'
  },
  {
    title: 'Team',
    href: '#'
  },
  {
    title: 'About Us',
    href: '#'
  }
]

const PagesLayout = async ({ children }: Readonly<{ children: ReactNode }>) => {
  const headersList = await headers()
  const host = headersList.get('host') || ''
  const domainTheme = host.includes(`rollerblindbekasi.${process.env.NEXT_PUBLIC_DOMIN_EXTENSION}`) ? `rollerblindbekasi.${process.env.NEXT_PUBLIC_DOMIN_EXTENSION}` : 
                      host.includes(`rollerblindjakarta.${process.env.NEXT_PUBLIC_DOMIN_EXTENSION}`) ? `rollerblindjakarta.${process.env.NEXT_PUBLIC_DOMIN_EXTENSION}` : 
                      host;
                      
  const data = await fetchHomepageData(domainTheme);
  const domain = data?.domain;
  const menu = data?.menu || [];
  const proto = headersList.get('x-forwarded-proto') || 'http'
  const uri = host + (headersList.get('x-forwarded-uri') ?? '') // kadang ada (tergantung setup proxy)

  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 h-full w-full min-w-0 flex-col'>
        {/* Header Section */}
        <Header navigationData={navigationData} domain={domain} menu={headerMenu}/>

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

        <CTASection domain={domain} />

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

export default PagesLayout