<script lang="ts">
  export let text: string | undefined;
  export let link: string | undefined = '';
  export let className: string | undefined;
  export let ghost: boolean | undefined = false;
  export let loading: boolean | undefined = false;
  export let onClick: (() => void) | undefined = () => false;
</script>

{#if link}
  <a href={link} class="button {ghost ? 'button--ghost' : ''} {loading ? 'loading' : ''} {className}">{text}</a>
{:else}
  <div
    class="button {ghost ? 'button--ghost' : ''} {loading ? 'loading' : ''} {className}"
    on:click={onClick ? onClick : null}
    on:keydown={() => false}
    tabindex="0"
    role="button"
  >
    {text}
  </div>
{/if}

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

  .button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $redPrimary;
    color: $techWhite;
    border: none;
    outline: none;
    padding: 16px 50px;
    border-radius: 40px;
    cursor: pointer;
    width: max-content;
    user-select: none;

    @include breakpoint-down('deskS') {
      padding: 12px 50px;
    }

    &:hover {
      background: $redHover;
    }

    &--ghost {
      background: transparent;
      color: $fontPrimary;
      border: thin solid $fontPrimary;
      padding: 12px 50px;

      &:hover {
        background: transparent;
      }
    }

    &::after,
    &::before {
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border: 4px solid transparent;
      border-radius: 50%;
      animation: spinner 1s ease infinite;
      opacity: 0;
      pointer-events: none;
    }

    &::after {
      border-top-color: #ffffff;
    }

    &::before {
      border-bottom-color: #ffffff;
    }

    &.loading {
      color: transparent !important;
      pointer-events: none !important;

      &:after,
      &:before {
        opacity: 1;
      }
    }

    @keyframes spinner {
      from {
        transform: rotate(0turn);
      }

      to {
        transform: rotate(1turn);
      }
    }
  }
</style>