import { useGetSettingsQuery } from '../../../../features/settings/settingsApi';
import DefaultBadgeToggler from './components/DefaultBadgeToggler';
import WhereToShowBadge from './components/WhereToShowBadge';

const GeneralSettings = () => {
  const { data: settings, isLoading } = useGetSettingsQuery();

  return (
    <div className='wmx-divide-y wmx-divide-white'>
      <DefaultBadgeToggler
        isLoading={isLoading}
        label='WooCommerce Default Badge'
        description='Enable or disable the default WooCommerce product badges.'
        setting='wc_badge_enabled'
        enabled={settings?.wc_badge_enabled || false}
      />
      <DefaultBadgeToggler
        isLoading={isLoading}
        label='Badge Position Compatibility Mode'
        description='Enable if your theme shows badges in the wrong position.'
        setting='custom_wrapper'
        enabled={settings?.custom_wrapper || false}
      />
      <WhereToShowBadge isLoading={isLoading} settings={settings} />
    </div>
  );
};
export default GeneralSettings;
