import React from "react";
import datas from "../../data/product_data.json";
import Layout from "../Partials/Layout";
import CreateNft from "./CreateNft";
import Hero from "./Hero";
import SellHistoryMarketVisitorAnalytic from "./SellHistoryMarketVisitorAnalytic";
import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
import TrendingSection from "./TrendingSection";
import UpdateTable from "./UpdateTable";
import HomeTaskDisplay from "./HomeTaskDisplay";
import UsersService from "../../services/UsersService";
import usersService from "../../services/UsersService";
import { useSelector } from "react-redux";


export default function Home(props) {

    console.log("PROPS IN HOME->",props);

    const trending = datas.datas;
    const jobData =  datas.datas; // api calls or cache
    //getHomeDate
    const userApi = new usersService();
    const homeData = userApi.getHomeDate();

    const {userDetails} = useSelector((state) => state?.userDetails)

    return (
        <Layout>
            <div className="home-page-wrapper">
                <Hero className="mb-10"
                      data={userDetails}
                      bannerList={props.bannerList}
                />
                <HomeTaskDisplay
                    jobData={jobData}
                    className="mb-10"
                    bannerList={props.bannerList}
                />
            </div>
        </Layout>
    );
}
// /*
//      <Layout>
//             <div className="home-page-wrapper">
//                 <Hero className="mb-10" data={userDetails} />
//                 {/* <CreateNft />
//         <TrendingSection trending={trending} className="mb-10" />*/}
// <HomeTaskDisplay
//     jobData={jobData}
//     className="mb-10"
//     bannerList={props.bannerList}
// />
{/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
                <TopSellerTopBuyerSliderSection className="mb-10" />
                <UpdateTable className="mb-10"/>*/}
// </div>
// </Layout>