import s from './styles.module.scss';
import Image from 'next/image';
import stepOne from '@public/images/step1.png';
import stepTwo from '@public/images/step2.png';
import stepThree from '@public/images/step3.png';
import stepFour from '@public/images/step4.png';
import arrow from '@public/images/arrow.png';

type OrderSchemaProps = {
  title: string;
  description: string;
};

function OrderSchema({ title, description }: OrderSchemaProps) {
  return (
    <section className={s.Section}>
      <h3 className={s.Header}>{title}</h3>
      <div className={s.Container}>
        <div className={s.Block}>
          <Image className={s.Image} src={stepOne} alt={''} height={120} />
          <p className={s.Text}> Заявка на сайте </p>
          <p className={s.Text}> или </p>
          <p className={s.Text}> звонок по телефону </p>
          <p className={s.Text}> +7 (900) 241-34-34 </p>
        </div>
        <div className={s.Block}>
          <Image className={s.Arrow} src={arrow} alt={''} height={16} />
        </div>
        <div className={s.Block}>
          <Image className={s.Image} src={stepTwo} alt={''} height={120} />
          <p className={s.Text}>Мы свяжемся </p>
          <p className={s.Text}> с вами</p>
          <p className={s.Text}>и уточним</p>
          <p className={s.Text}>детали</p>
        </div>
        <div className={s.Block}>
          <Image className={s.Arrow} src={arrow} alt={''} height={16} />
        </div>
        <div className={s.Block}>
          <Image className={s.Image} src={stepThree} alt={''} height={120} />
          <p className={s.Text}>Подписываем договор,</p>
          <p className={s.Text}>Вы оплачиваете услуги,</p>
          <p className={s.Text}>предоставляете необходимые </p>
          <p className={s.Text}>документы</p>
        </div>
        <div className={s.Block}>
          <Image className={s.Arrow} src={arrow} alt={''} height={16} />
        </div>
        <div className={s.Block}>
          <Image className={s.Image} src={stepFour} alt={''} height={120} />
          <p className={s.Text}>Составляем</p>
          <p className={s.Text}>Экспертное заключение,</p>
          <p className={s.Text}>вы получаете результат</p>
        </div>
      </div>
      <p className={s.Text}>{description}</p>
    </section>
  );
}

export { OrderSchema };
