import { useEffect, useState } from "react";
import { useMediaQuery } from "react-responsive";
import Footer from "../components/home/footer/Footer";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import InternalPageHeader from "../components/internalPageHeader/InternalPageHeader";

import SignUpForm from "../components/signUp/SignUpForm";
import * as CategoryAPI from "./api/category";

export default function SignUp(props: any){
    const [category, setCategory] = useState([]);
	const [categoryTree, setCategoryTree] = useState([]);
  useEffect(() => {
    CategoryAPI.fetchCategory().then((res) => {
			setCategory(res);
		  });
		  CategoryAPI.fetchCategoryTree().then((res) => {
			setCategoryTree(res.categories);
		  });
    },[]);
    const isMobile = useMediaQuery({ maxWidth: 767.68 });
    return(
        <>
        {isMobile ? <MobileHeader /> : <InternalPageHeader catagories={category} categoryTree={categoryTree}/>}
        <SignUpForm/>
        <Footer/>
        {isMobile && <MobileFooter />}
        </>
    )

}