import React from 'react';
import { Routes, Route, Navigate, Link} from 'react-router-dom';
import MarketDataPage from './MarketDataPage';
import BidsPage from './BidsPage';
import SubmitBidPage from './SubmitBidPage';
import { Menu } from '@arco-design/web-react';
import { PageHeader, Typography } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';

const ghostBgStyle = {
  backgroundImage: 'radial-gradient(var(--color-fill-3) 1px, rgba(0, 0, 0, 0) 1px)',
  backgroundSize: '16px 16px',
  padding: 20,
};

function App() {
  return (
    <div>
      <style>
              {`
                @media (max-width: 600px) {
                  .page-header-title {
                    font-size: 20px !important;
                    text-align: center;
                  }
                  .page-header-subtitle {
                    font-size: 14px !important;
                    text-align: center;
                  }
                }
              `}
            </style>
      <div style={ghostBgStyle}>
        <PageHeader
                  title={
                    <Typography.Title heading={3} className="page-header-title">
                      PolyEnergy
                    </Typography.Title>
                  }
                  subTitle={
                    <Typography.Title type="secondary" heading={4} className="page-header-subtitle">
                      Virtual Energy Trading
                    </Typography.Title>
                  }
                />
        <Menu mode="horizontal" defaultSelectedKeys={['market-data']}>
                <Menu.Item key="market-data">
                  <Link to="/market-data">Market Data</Link>
                </Menu.Item>
                <Menu.Item key="submit-bid">
                  <Link to="/submit-bid">Submit Bid</Link>
                </Menu.Item>
                <Menu.Item key="bids">
                  <Link to="/bids">My Bids</Link>
                </Menu.Item>
              </Menu>
      </div>

      <Routes>
        <Route path="/" element={<Navigate to="/market-data" replace />} />
        <Route path="/market-data" element={<MarketDataPage />} />
        <Route path="/submit-bid" element={<SubmitBidPage />} />
        <Route path="/bids" element={<BidsPage />} />
      </Routes>
    </div>
  );
}

export default App;