import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Link } from 'react-router-dom';

// Astryx UI CSS
import '@astryxdesign/core/reset.css';
import '@astryxdesign/core/astryx.css';
import '@astryxdesign/theme-neutral/theme.css';
import './index.css';

import { Theme } from '@astryxdesign/core';
import { LinkProvider } from '@astryxdesign/core/Link';
import { neutralTheme } from '@astryxdesign/theme-neutral/built';
import App from '@/App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Theme theme={neutralTheme}>
      <BrowserRouter>
        {/* Makes every Astryx nav/link component (SideNavItem, TopNavHeading, DropdownMenu, ...)
            route through React Router's Link instead of a hard <a> reload. */}
        <LinkProvider component={Link}>
          <App />
        </LinkProvider>
      </BrowserRouter>
    </Theme>
  </React.StrictMode>
);
