const { render } = wp.element;

import '@mantine/charts/styles.css';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import 'mantine-contextmenu/styles.css';
import 'mantine-datatable/styles.css';

import { Badge, MantineProvider } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { Notifications } from '@mantine/notifications';
import { __ } from '@wordpress/i18n';
import { OptionsProvider } from '../components/Options';
import { TabsSettings } from './TabsSettings';

const Settings = () => {
  return (
    <MantineProvider defaultColorScheme="light">
      <ModalsProvider>
        <Notifications />
        <OptionsProvider options={WPBannerize.options}>
          <Badge
            gradient={{ from: 'orange', to: 'yellow', deg: 90 }}
            mt={16}
            size="xl"
            variant="gradient">
            {__('Bannerize Settings', 'wp-bannerize')}
          </Badge>
          <TabsSettings />
        </OptionsProvider>
      </ModalsProvider>
    </MantineProvider>
  );
};

render(<Settings />, document.getElementById('wp-bannerize-pro-settings'));