'use client';

import s from './styles.module.scss';
import type { ReactNode } from 'react';
import { Icons } from '@/shared/ui/icon';
import { useModal } from '@core/providers/modal-provider';
import { ConsultationModal } from '@/widgets';

type TBeautyButtonProps = {
  children?: ReactNode;
  onClick?: () => void;
};

function BeautyButton({ children, onClick }: TBeautyButtonProps) {
  const modal = useModal();
  const openModal = () =>
    modal.showModal(<ConsultationModal pageName={'Header'} />);

  return (
    <div className={s.Container}>
      <button className={s.Button} onClick={openModal}>
        <Icons.BtnPhone color={'white'} />
        <span className={s.Phone}>{children}</span>
      </button>
      <p className={s.Action} onClick={openModal}>
        Записаться
      </p>
    </div>
  );
}

export { BeautyButton };