import s from './styles.module.scss';
import { Icons } from '@shared/ui/icon';
import { ROUTES_EXTERNAL } from '@shared/const/route';
import { CONTACTS } from '@shared/const/contacts';

function TopMenu() {
  return (
    <section className={s.Container}>
      <div className={s.Top}>
        <div className={s.Icons}>
          <a href={`${CONTACTS.WHATSAPP}`}>
            <Icons.Whatsapp className={s.Icon} />
          </a>
          <a href={`${CONTACTS.TELEGRAM}`}>
            <Icons.Telegram className={s.Icon} />
          </a>
          <a href={`tel:${CONTACTS.PHONE}`}>
            <Icons.Phone className={s.Icon} />
          </a>
        </div>
        <div className={s.Contacts}>
          <p className={s.Item}>
            <a href={`mailto:${CONTACTS.EMAIL}`}>
              <Icons.Envelope className={s.IconBox} />
            </a>
            <a href={`mailto:${CONTACTS.EMAIL}`}>
              <span className={s.Description}>{CONTACTS.EMAIL}</span>
            </a>
          </p>

          <p className={s.Item}>
            <a href={`${ROUTES_EXTERNAL.YANDEX_MAP}`}>
              <Icons.Map className={s.IconBox} />
            </a>
            <a href={`${ROUTES_EXTERNAL.YANDEX_MAP}`}>
              <span className={s.Description}>{CONTACTS.ADDRESS}</span>
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}

export { TopMenu };
