<script lang="ts">
  import type { HTMLAttributeAnchorTarget } from 'svelte/elements';

  export let text: string | undefined = '';
  export let link: string | undefined = '';
  export let target: HTMLAttributeAnchorTarget | undefined = undefined;
  export let className: string | undefined = '';
  export let ghost: boolean | undefined = false;
  export let loading: boolean | undefined = false;
  export let color: string | undefined = undefined;
  export let bgColor: string | undefined = undefined;
  export let onClick: (() => void) | undefined = () => false;
  export let disabled = false;

  const style: string[] = [];

  if (color) {
    style.push(`color: ${color}`);
    if (ghost) {
      style.push(`border-color: ${color}`);
    }
  }
  if (bgColor && !ghost) {
    style.push(`background-color: ${bgColor}`);
  }


</script>

{#if link}
  <a href={link} target={target} class="button {ghost ? 'button--ghost' : ''} {loading ? 'loading' : ''} {className}">
    {#if text}
      {text}
    {:else}
      <slot />
    {/if}
  </a>
{:else}
  <div
    class="button {ghost ? 'button--ghost' : ''} {disabled ? 'disabled' : ''} {loading ? 'loading' : ''} {className}"
    on:click={onClick && !disabled ? onClick : null}
    on:keydown={() => false}
    tabindex="0"
    role="button"
    style={style.join(';')}
  >
    {#if text}
      {text}
    {:else}
      <slot />
    {/if}

  </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;
    }

    &::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: $techWhite;
    }

    &::before {
      border-bottom-color: $techWhite;
    }

    &.disabled {
      background: $redGrey;
    }

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

      @include breakpoint-down('deskL') {
        padding: 12px 40px;
      }

      &:hover {
        background: transparent;
      }

      &::after {
        border-top-color: $fontPrimary;
      }

      &::before {
        border-bottom-color: $fontPrimary;
      }
    }

    &-white {
      background: $techWhite;
      color: $fontPrimary;

      &:hover {
        background: $techBlue2;
      }

    }

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

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

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

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