import React from 'react';
import { useTranslation } from 'react-i18next';
import { Icon, Icons, Text } from 'folds';
import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
import { NavEmptyCenter, NavEmptyLayout } from '../../../components/nav';
import { PageNav } from '../../../components/page';
import { DirectStreamHeader } from '../direct/DirectStreamHeader';

export function Bots() {
  const { t } = useTranslation();
  useNavToActivePathMapper('bots');

  return (
    <PageNav size="500">
      <DirectStreamHeader />
      <NavEmptyCenter>
        <NavEmptyLayout
          icon={<Icon size="600" src={Icons.Bulb} />}
          title={
            <Text size="H5" align="Center">
              {t('Bots.title')}
            </Text>
          }
        />
      </NavEmptyCenter>
    </PageNav>
  );
}