<script lang="ts">
  import facebook from '../../../assets/images/social/facebook.svg';
  import linkedin from '../../../assets/images/social/linkedin.svg';
  import twitter from '../../../assets/images/social/twitter.svg';
  import { onMount } from 'svelte';

  export let className = '';

  let href = '';

  onMount(() => {
    href = window.location.href;
  });
</script>

<div class="share {className}">
  <div class="share__text">Share this post:</div>
  <div class="share__items">
    <div class="share__item">
      <a
        aria-label="Share link on linkedin app"
        class="share__link"
        href="https://www.linkedin.com/sharing/share-offsite/?url={href}"
      >
        <img alt="linkedin" height="100%" loading="lazy" src={linkedin} width="100%" />
      </a>
    </div>
    <div class="share__item">
      <a
        aria-label="Share link on facebook app"
        class="share__link"
        href="https://www.facebook.com/sharer.php?u={href}"
      >
        <img alt="facebook" height="100%" loading="lazy" src={facebook} width="100%" />
      </a>
    </div>
    <div class="share__item">
      <a aria-label="Share link on twitter app" class="share__link" href="https://twitter.com/intent/tweet?url={href}">
        <img alt="Twitter" height="100%" loading="lazy" src={twitter} width="100%" />
      </a>
    </div>
  </div>
</div>

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

  .share {
    &__text {
      @include smallDefault;

      color: $techBlueSecondary;
    }

    &__items {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    &__item {
      position: relative;
      width: 52px;
      min-width: 52px;
      height: 52px;
    }

    &__link {
      display: flex;
    }
  }

  :global(.share.right) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  :global(.share.center) {
    display: flex;
    flex-direction: column;
    align-items: center;

    .share__text {
      text-align: center;
    }
  }
</style>