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() {
    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} />
                {/* <CreateNft />
        <TrendingSection trending={trending} className="mb-10" />*/}
                <HomeTaskDisplay
                    jobData={jobData}
                    className="mb-10"/>
                {/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
                <TopSellerTopBuyerSliderSection className="mb-10" />
                <UpdateTable className="mb-10"/>*/}
            </div>
        </Layout>
    );
}
