import { useQuery } from '@tanstack/react-query';

import { t } from '../i18n/t';
import { fetchHealth } from '../lib/api';

export function HomePage(): React.JSX.Element {
  const health = useQuery({ queryKey: ['healthz'], queryFn: fetchHealth, retry: 1 });

  return (
    <>
      <h1>{t('home.title', 'Welcome to Dorfteich')}</h1>
      <p>
        {t(
          'home.intro',
          'Dorfteich is an open-source wiki with real-time collaboration. This instance is being set up.',
        )}
      </p>
      {health.isPending && (
        <span className="status-pill">{t('home.api.checking', 'Checking API …')}</span>
      )}
      {health.isSuccess && (
        <span className="status-pill status-pill--ok">
          {t('home.api.ok', 'API reachable')} · {health.data.version}
        </span>
      )}
      {health.isError && (
        <span className="status-pill status-pill--error">
          {t('home.api.error', 'API not reachable')}
        </span>
      )}
    </>
  );
}