import React from 'react';
import Header from './header';
import Navigation from './navigation';
import Footer from './footer';
import { Section } from 'lucide-react';




// 類似 Vue 的 Slot 功能，用於包裹子組件，提供統一的佈局結構
type LayoutProps = {
  subNav?: React.ReactNode;
  section?: React.ReactNode;
  children?: React.ReactNode;
  pageMeta?: React.ReactNode;
  mainClass?: string;
};

export default function App({ subNav = null, section = null, children = null, pageMeta = null, mainClass = "" }: LayoutProps) {

  return (
    <>
      {/* <Header /> */}
      <Navigation>
        {subNav}
      </Navigation>
      {pageMeta}
      {section}
      <main
        className={`${mainClass}`}
        style={
          !route().current('home') ? { marginTop: "0" } : {}
        }
      >
        {children}
      </main >
      <Footer />
    </>
  );
}