import { useT } from '../i18n.tsx';
import { I, OLD_ADMIN_URL } from '../components/kit.tsx';

export function Soon({ title, stage }: { title: string; stage: number }) {
  const { t } = useT();
  return (
    <>
      <div className="bo-head">
        <h1 className="bo-title">{title}</h1>
      </div>
      <div className="bo-soon">
        <h2 className="bo-h2">{t('soon.title', { section: title })}</h2>
        <p className="bo-sub" style={{ marginBottom: 20 }}>
          {t('soon.text', { n: stage })}
        </p>
        <a className="bo-btn" href={OLD_ADMIN_URL} target="_blank" rel="noreferrer">
          {t('soon.open')}
          <I name="external" size={16} />
        </a>
      </div>
    </>
  );
}