import { View, Text } from "@tarojs/components"
import { FC, memo, PropsWithChildren } from "react"


const PageLoader = memo(() => {
    return (
        <View className='h-screen w-screen flex items-center justify-center bg-red-500 text-white text-2xl'>
            <Text>Loading...</Text>
        </View>
    )
})

interface LayoutProps {
    loadding?: boolean
}

interface LayoutComponent extends FC<PropsWithChildren<LayoutProps>> {
    Header: FC<PropsWithChildren>,
    Footer: FC<PropsWithChildren>,
    Container: FC<PropsWithChildren>,
}

const LayoutBase = ({ children, loadding = true }: PropsWithChildren<LayoutProps>) => {
    if (loadding){
        return (
            <PageLoader></PageLoader>
        );
    }
  return (
    <View className='h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl'>
      {children}
    </View>
  )
}

const Layout = LayoutBase as unknown as LayoutComponent

export default Layout;