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;