import { useSelect } from '@wordpress/data';
import { STORE_NAME } from '@/store/constants';
import { TABS } from '@SeoPopup/modal/tabs';
import { useMemo } from '@wordpress/element';
import { isPageBuilderActive } from '@SeoPopup/components/page-seo-checks/analyzer/utils/page-builder';
// Tabs related logic will be handled through this component.
const SettingsRoot = () => {
const { currentTab } = useSelect(
( select ) => select( STORE_NAME ).getAppSettings(),
[]
);
const RenderTab = useMemo( () => {
const tab = TABS[ currentTab ?? 'optimize' ];
const isPageBuilder = isPageBuilderActive();
if ( isPageBuilder ) {
return tab?.pageBuilderComponent || tab?.component;
}
return tab?.component;
}, [ currentTab ] );
return <RenderTab />;
};
export default SettingsRoot;