'use client';

import s from './styles.module.scss';
import { AdvancedPhoneInput, Button, Input } from '@shared/ui';
import Image from 'next/image';
import toast from 'react-hot-toast';

import bgForm from '@public/images/bg-form.jpg';

export default function OfferRequest() {
  const notify = () => toast.success('Заявка на консультацию принята');

  return (
    <div className={s.Form}>
      <Image
        className={s.Background}
        src={bgForm}
        placeholder='blur'
        alt={''}
        quality={75}
        fill
        priority
      />
      <div className={s.PanelLeft}>
        <p className={s.SubTitle}>Нужна помощь?</p>
        <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
      </div>
      <div className={s.PanelRight}>
        <AdvancedPhoneInput
          containerClassName={s.AdvPhoneInput}
          text='Отправить заявку'
          placeholder={'+7 (999) 123 45 67'}
          onClick={notify}
        />

        <div className={s.MobileBtns}>
          <Input placeholder='Ваше имя' fullWidth />
          <Input placeholder='+7 999 123 45 67' fullWidth />
          <Button variant='orange' fullWidth onClick={notify}>
            Отправить заявку
          </Button>
        </div>
      </div>
    </div>
  );
}
