import Layout from "@/components/common/Layout";
import "@/assets/css/globle.css";
//import '@/assets/css/error.css';
import ErrorPage from "./_error";
import { useEffect, useState } from "react";
import axios from "axios";
import Loader from  "@/components/UI/Loader";
import { ToastContainer } from 'react-toastify';


export default function App({ Component, pageProps }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const[error,setError]=useState(null);

  const base_Url=process.env.NEXT_PUBLIC_DOMAIN;
  const sub_domain=process.env.NEXT_PUBLIC_SUB_DOMAIN;



  console.log("base_Url",base_Url,sub_domain)
  
  useEffect(() => {
    const fetchLayoutData = async () => {
      try {
         const response = await axios.get(`${base_Url}/website/${sub_domain}`, {
   
          headers: {
            Authorization: `Bearer ${process.env.NEXT_PUBLIC_AUTH_API_KEY}`
          }
        });
        setData(response.data); 

       console.log("layoutData",response.data)
        const layoutData=response.data;
       
        setLoading(false)
       // console.log("layoutData",response.data.response.status)
        //setError(response.data.response.status);
        if (layoutData && layoutData.website_favicon) {
        const link = document.createElement('link');
        link.rel = 'icon';
        link.href = layoutData.website_favicon;
        document.head.appendChild(link);
      }

      } catch (error) {
        console.error("something worng", error);
        console.error("error",error)
        setError(error)
        setLoading(false)
      }
    };
    fetchLayoutData();
  }, []); 

  if (error) {

    return <ErrorPage  />;
  }

 
  return (
    <>
  
       {loading ? ( 
        <Loader/>
      ) : ( 
        <Layout layoutData={data}>
          <Component {...pageProps} data={data} />
        </Layout>
   
      )} 
    </>

  );

}