import Segment from '../shared/segment';
import Audio from '../shared/audio';
import NavLink from '../shared/buttons/nav-link';
import { useIntroducer } from '../../hooks/react-query/use-introducer';
import { useUser } from '../../hooks/react-query/use-user';

function Root() {
  const { isError: withoutUser, isSuccess: withUser } = useUser();
  const { isError: withoutIntroducer } = useIntroducer(withUser);
  return (
    <Segment textAlign='justify' className='p-8 leading-8'>
      <h1 data-testid='heading' className='mt-4 mb-8 text-center text-lg font-medium'>
        سامانه همکاری در فروش فلش کارت های مدمشاور
      </h1>
      <div data-testid='content'>
        <p>
          <span>به سامانه </span>
          <span className='font-medium'>همکاری در فروش فلش کارت های مدمشاور</span>
          <span> خوش آمدید.</span>
        </p>
        <p>توی این بخش توضیحات کلی درباره ر‌وش استفاده از سامانه برای کسب درآمد ارائه می‌شود.</p>
        <p>
          <span>لطفا </span>
          <span className='font-medium'>فایل صوتی توضیحات استفاده از سامانه</span>
          <span> را گوش بدهید و برای گرفتن جواب سوالات باقی مانده خود از طریق </span>
          <a href='https://t.me/medmoshaver_flash_admin' className='font-medium text-blue-700'>
            ادمین فلش کارت های مدمشاور
          </a>
          <span> با ما در ارتباط باشید.</span>
        </p>
      </div>
      <div data-testid='audio' className='p-8 text-gray-500'>
        <Audio src='voices/introduction.mp3' caption='فایل صوتی توضیحات استفاده از سامانه:' />
      </div>

      {(withoutUser || withoutIntroducer) && (
        <div data-testid='start' className='my-6 flex flex-col justify-center gap-3'>
          <NavLink
            to={withoutIntroducer ? '/home' : '/register'}
            size='4xl'
            color='green'
            colorWeight={500}
            content='شروع کسب درآمد'
            className='mx-auto'
          />
        </div>
      )}
      <div>
        <NavLink
          outline
          to='/terms-and-conditions'
          size='lg'
          color='rose'
          colorWeight={400}
          content='شرایط و قوانین'
          className='mx-auto'
        />
      </div>
    </Segment>
  );
}

export default Root;
