import { Helmet } from 'react-helmet-async';

import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';

import useKudosTitle from '../hooks/useKudosTitle';

import { AvailablePointsCard } from './components/AvailablePointsCard';
import { ExchangesHeader } from './components/ExchangesHeader';
import { ExchangesTabs } from './components/ExchangesTabs';

const Exchanges = () => {
  const HugoThemeProvider = useHuGoTheme();
  const title = useKudosTitle();

  return (
    <HugoThemeProvider>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <Container
        maxWidth="lg"
        sx={{ py: 3 }}
      >
        <Stack sx={{ gap: 2 }}>
          <ExchangesHeader />
          <AvailablePointsCard />
          <ExchangesTabs />
        </Stack>
      </Container>
    </HugoThemeProvider>
  );
};

export default Exchanges;
