'use client';

import s from './styles.module.scss';
import { Icons } from '@shared/ui';
import { phoneBeautify } from '@shared/lib/phoneBeautify/phoneBeautify';
import { CONTACTS } from '@shared/const/contacts';
import { useModal } from '@core/providers/modal-provider';
import { ConsultationModal } from '@/widgets';

function MobileCallback() {
  const modal = useModal();
  const openModal = () => modal.showModal(<ConsultationModal />);

  const handlePhoneClick = () => {
    window.open(`tel:${CONTACTS.PHONE}`, '_self');
  };
  return (
    <div className={s.Root}>
      <button className={s.Button} onClick={openModal}>
        <Icons.MobileContact className={s.Icon} />
        <span className={s.Text}>Записаться</span>
      </button>
      <button className={s.Button} onClick={handlePhoneClick}>
        <Icons.MobilePhone className={s.Icon} />
        <span className={s.Text}>{phoneBeautify(CONTACTS.PHONE)}</span>
      </button>
    </div>
  );
}

export { MobileCallback };