import React, { useEffect } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import RecentActions from "./RecentActions";
import Products from "./Products";
import TopBar from "./TopBar";
import ProductsURL from "./ProductsURL";
import { SocketContextValues } from "../context/SocketIOContext";
import DashPayments from "./DashPayments";

export default function HomeSections(){

    const {sendMessage} = SocketContextValues() // Destructures values from socket context

    // useEffect(()=>{
    //     sendMessage('Hello socket', '2020aklksod')
    // },[])

    return <>
        {/* <div className="row">
            <div className="col-md-12 m-b-30">
                <div className="d-block d-sm-flex flex-nowrap align-items-center">
                    <div className="page-title mb-2 mb-sm-0">
                        <h1>The Practice Name Shows Up Here </h1>
                    </div>
                    <div className="ml-auto d-flex align-items-center">
                        <nav>
                            <ol className="breadcrumb p-0 m-b-0">
                                <li className="breadcrumb-item">
                                    <a href="/dash"><i className="ti ti-home"></i></a>
                                </li>
                                <li className="breadcrumb-item">
                                    Dashboard
                                </li>
                                <li className="breadcrumb-item active text-primary" aria-current="page">Home</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div> */}
        <BreadcrumbComBS title='Home' paths={['Dashboard', 'Home']} />
        <div className="row">
            <TopBar />
        </div>
        <div className="row">
            <div className="col-xxl-6 m-b-30">
                <Products />
            </div>
            <div className="col-xxl-6 m-b-30">
                <RecentActions />
            </div>
        </div>
        <div className="row">
            <ProductsURL />

            <DashPayments />
        </div>
    </>;

}