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 { AnalyticsTabs } from './AnalyticsTabs';

const AnalyticsOverview = () => {
  return (
    <MantineProvider defaultColorScheme="light">
      <ModalsProvider>
        <Notifications />
        <OptionsProvider options={WPBannerize.options}>
          <Badge mt={16} size="xl" variant="gradient">
            {__('Bannerize Analytics', 'wp-bannerize')}
          </Badge>
          <AnalyticsTabs />
        </OptionsProvider>
      </ModalsProvider>
    </MantineProvider>
  );
};

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