<script lang="ts">
  import xIcon from '$assets/images/main/footer/x.svg';
  import fbIcon from '$assets/images/main/footer/fb.svg';
  import igIcon from '$assets/images/main/footer/ig.svg';
  import instagramIcon from '$assets/images/main/footer/instagram.svg';
  import tgIcon from '$assets/images/main/footer/tg.svg';
  import ytIcon from '$assets/images/main/footer/yt.svg';

  let text = '';
</script>

<div class="social">
  <div class="social__items">
    <div class="social__item">
      <a href="https://twitter.com/Quadcode_SaaS" target="_blank" aria-label="We are on the social network twitter">
        <img src={xIcon} alt="X (Twitter)" />
      </a>
    </div>
    <div class="social__item">
      <a
        href="https://www.facebook.com/Quadcode-108315268769590"
        target="_blank"
        aria-label="We are on the social network facebook"
      >
        <img src={fbIcon} alt="Facebook" />
      </a>
    </div>
    <div class="social__item">
      <a
        href="https://www.linkedin.com/company/quadcode-saas/"
        target="_blank"
        aria-label="We are on the social network linkedin"
      >
        <img src={igIcon} alt="LinkedIn" />
      </a>
    </div>
    <div class="social__item">
      <a
        href="https://www.instagram.com/quadcode_software/"
        target="_blank"
        aria-label="We are on the social network instagram"
      >
        <img src={instagramIcon} alt="Instagram" />
      </a>
    </div>
    <div class="social__item">
      <a href="https://t.me/quadcode_solutions" target="_blank" aria-label="We are on the social network telegram">
        <img src={tgIcon} alt="Telegram" />
      </a>
    </div>
    <div class="social__item">
      <a
        href="https://www.youtube.com/@quadcode_saas"
        target="_blank"
        aria-label="We are on the social network youtube"
      >
        <img src={ytIcon} alt="YouTube" />
      </a>
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/media';

  .social {
    &__title {
      display: none;
      font-size: 12px;
      line-height: 16px;
      font-weight: 500;
      color: #99a1af;
      text-transform: uppercase;
      margin-bottom: 16px;

      @media (max-width: 720px) {
        display: block;
      }
    }

    &__items {
      display: flex;
      align-items: center;

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        justify-content: flex-start;

        gap: 10px 50px;
      }
    }

    &__item {
      width: 20px;
      min-width: 20px;
      height: 20px;
      margin-right: 16px;

      @include breakpoint-down('tabM') {
        margin-right: 0px;
      }

      a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
      }

      &:last-of-type {
        margin-right: 0;
      }
    }
  }
</style>