import s from './style.module.scss';
import { Button } from '@shared/ui';
import Image from 'next/image';
import emailImg from '@public/images/em-rounded-logo.png';
import tgImg from '@public/images/tg-rounded-logo.png';
import waImg from '@public/images/wa-rounded-logo.png';
import { CONTACTS } from '@shared/const/contacts';

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

function Connect({ title, description }: ConnectProps) {
  const emailTo = `mailto:${CONTACTS.EMAIL}`;
  const callTo = `tel:${CONTACTS.PHONE}`;
  const telegramTo = CONTACTS.TELEGRAM;
  const whatsappTo = CONTACTS.WHATSAPP;

  return (
    <section className={s.Section}>
      <h3 className={s.Header}>{title}</h3>
      <p className={s.Text}>{description}</p>
      <div className={s.Container}>
        <div className={s.Icons}>
          <div className={s.Icon}>
            <a href={whatsappTo} target='_blank' rel='noopener noreferrer'>
              <Image src={waImg} alt={''} className={s.Image} />
            </a>
            <a href={whatsappTo} target='_blank' rel='noopener noreferrer'>
              <p className={s.Description}>WHATSAPP</p>
            </a>
          </div>
          <div className={s.Icon}>
            <a href={telegramTo} target='_blank' rel='noopener noreferrer'>
              <Image src={tgImg} alt={''} className={s.Image} />
            </a>
            <a href={telegramTo} target='_blank' rel='noopener noreferrer'>
              <p className={s.Description}>TELEGRAM</p>
            </a>
          </div>
          <div className={s.Icon}>
            <a href={emailTo}>
              <Image src={emailImg} alt={''} className={s.Image} />
            </a>
            <a href={emailTo}>
              <p className={s.Description}>EMAIL</p>
            </a>
          </div>
        </div>
        <div className={s.CallOrder}>
          <h4 className={s.Title}>Звоните по телефону</h4>
          <a href={callTo}>
            <Button variant={'white'} className={s.Btn}>
              +7 (900) 241-34-34
            </Button>
          </a>
          <p className={s.Description}>мы работаем с 08:00 до 17:00</p>
        </div>
      </div>
    </section>
  );
}

export { Connect };
