// "use client"

// import AppSidebar from "@/components/sidebar";
// import { useMounted } from "@/hooks/useMounted";
// import useResponsive from "@/hooks/useResponsive";
// import { LAYOUT_SETTING, SORT_FIELD_TYPE } from "@/lib/appConstant";
// import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
// import { getBodySetting, getLayoutViewPage, getPageMargin, getServicePath, getViewSettings } from "@/lib/redux/features/serviceAdmin";
// import { makeStyles } from 'tss-react/mui';
// import { getAllSort, loadAllSort } from "@/lib/redux/features/sort";
// import { useEffect } from "react";
// import { getPublicHashtag } from "@/lib/redux/features/hashtag";
// import { useRouter } from "next/navigation";
// import { loadPublicContentGroups, setSortOrder } from "@/lib/redux/features/content";
// import { getOpenSidebar, setShowBanner, setShowFooter, setShowHeader } from "@/lib/redux/features/layout";
// import { getAuthInfo } from "@/lib/redux/features/auth";

type PropsType = {
  children: React.ReactNode;
};

// type MakeStylesType = {
//   pathname: any;
//   below768: boolean;
//   bodySetting: any;
//   isMegreLayout: boolean;
//   pageMargin: any;
// };
// const useStyle = makeStyles<MakeStylesType>()((theme, { below768, bodySetting, isMegreLayout, pageMargin, pathname }) => {
//   return (
//     {
//       body: {
//         backgroundColor: `${bodySetting.backgroundColor}!important`,
//         display: isMegreLayout ? '' : pathname.includes('subscription') ? 'block' : 'flex',
//         flexDirection: 'row',
//         flex: '1 0 0px',
//         fontSize: below768 ? '12px' : '16px',
//         '& em': {
//           // color: 'red'
//         }
//       },
//       contain: {
//         flex: '1 0 0px'
//       },
//       bodyLayout3: {
//         marginLeft: below768 ? pathname.includes('profile') ? '10px' : '5px' : `${pageMargin.left}px`,
//         marginRight: below768 ? pathname.includes('profile') ? '10px' : '5px' : `${pageMargin.right}px`
//       }
//     }
//   );
// });
// export default function ContentDetailsLayout(props: PropsType) {
//   const { children} = props;

  
//   const mounted = useMounted();
//   const router = useRouter();
//   const { below768 } = useResponsive();
//   const dispatch = useAppDispatch();

//   const isOpenSidebar = useAppSelector(getOpenSidebar);
//   const servicePath = useAppSelector(getServicePath);
//   const listSorts = useAppSelector(getAllSort);
//   const viewSettings = useAppSelector(getViewSettings);
//   const bodySetting = useAppSelector(getBodySetting);
//   const pageMargin = useAppSelector(getPageMargin);
//   const layoutViewPage = useAppSelector(getLayoutViewPage);
//   const isLoggedIn = !!useAppSelector(getAuthInfo);
//   // const authInfo = useAppSelector(getAuthInfo);

//   const isMegreLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT_AND_SEARCH_LAYOUT.id;
//   const ContentDetailsLeLayout = layoutViewPage === LAYOUT_SETTING.HOME_LAYOUT.id;

//   const { classes } = useStyle({ below768, bodySetting, isMegreLayout, pageMargin, pathname: (mounted ? window.location.pathname : '') });

//   useEffect(() => {
//     dispatch(loadAllSort(SORT_FIELD_TYPE.SORT_FIELD_HOME));
//     if (bodySetting && (bodySetting.companyId || bodySetting.companyId === 0) && (bodySetting.serviceAdminId || bodySetting.serviceAdminId === 0)) {
//       dispatch(getPublicHashtag({ companyId: bodySetting.companyId, serviceAdminId: bodySetting.serviceAdminId }));
//     }
//     dispatch(setShowBanner(false));
//     dispatch(setShowHeader(true));
//     dispatch(setShowFooter(true));
//   }, []);
//   useEffect(() => {
    
//     if (listSorts && listSorts.length > 0) {
//       const defaultSort = listSorts.find(item => item.isSortFieldDefault);
//       defaultSort && dispatch(setSortOrder({
//         sort: defaultSort.isAcsDefault,
//         sortField: defaultSort.field
//       }));
//     }
//   }, [listSorts]);

//   useEffect(() => {
//     dispatch(loadPublicContentGroups({ isLoggedIn }));
//   }, [isLoggedIn]);

//   return (
//       <div role="main" className={`${classes.body} ${(!isOpenSidebar || below768) && ' body-full '}`}>
//         {
//           ContentDetailsLeLayout &&
//           <AppSidebar listSorts={listSorts} viewSettings={viewSettings}/>
//         }
//         {
//           isMegreLayout
//           ? <div className={`${isMegreLayout ? classes.bodyLayout3 : classes.body}`}>
//             {children}
//           </div>
//           : <>
//             {children}
//           </>
//         }
//       </div>
//   );
// }
export default function ContentDetailsLayout(props: PropsType) {
  return <>
    {props.children}
  </>
};