import React from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Icon, Icons, Text } from 'folds';
import { NavEmptyCenter, NavEmptyLayout } from '../../../components/nav';

// Phase 1 placeholder shown when /channels/:space/ resolves on desktop with
// no :roomId yet. Phase 3 wires the list, Phase 4 wires ChannelView, this
// stub exists only to make the route resolve to something visible.
export function ChannelPickPlaceholder() {
  const { t } = useTranslation();
  return (
    <NavEmptyCenter>
      <NavEmptyLayout
        icon={<Icon size="600" src={Icons.Hash} />}
        title={
          <Text size="H5" align="Center">
            {t('Channels.pick_channel_title')}
          </Text>
        }
        content={
          <Box style={{ maxWidth: 360 }}>
            <Text size="T300" align="Center">
              {t('Channels.pick_channel_desc')}
            </Text>
          </Box>
        }
      />
    </NavEmptyCenter>
  );
}