import React, { useState } from "react";
import { PhoneOutlined } from "@ant-design/icons";
import styles from "./QuestionsBlock.module.css";
import Button from "../Button/Button";
import ModalRequestFormQuastion from "../../features/MainPage/PhoneRequest";

const QuestionsBlock: React.FC = () => {
  const [open, setOpen] = useState(false);

  return (
    <section className={styles.wrapper}>
      <div className={styles.inner}>
        <div className={styles.left}>
          <span className={styles.kicker}>Связь с нами</span>
          <h2 className={styles.title}>Есть вопросы?</h2>

          <p className={styles.text}>
            Мы готовы ответить на вопросы, помочь с подбором продукции и
            предоставить информацию о сотрудничестве.
          </p>
        </div>

        <div className={styles.right}>
          <div className={styles.phoneBlock}>
            <PhoneOutlined className={styles.phoneIcon} />
            <div>
              <a href="tel:+79101210962" className={styles.phoneNumber}>
                +7 910 121 09 62
              </a>
              <div className={styles.phoneInfo}>
                Понедельник - пятница, с 09:00 до 18:00 по Москве
              </div>
            </div>
          </div>

          <p className={styles.formLabel}>
            Или оставьте заявку, и мы вам перезвоним.
          </p>

          <Button label="Задать вопрос" onClick={() => setOpen(true)} />
          <ModalRequestFormQuastion open={open} onClose={() => setOpen(false)} />
        </div>
      </div>
    </section>
  );
};

export default QuestionsBlock;