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

<div
  class="button {className} {type} {size} {loading ? 'loading' : ''}"
  on:click={onClick || null}
  on:keydown={() => false}
  role="button"
  tabindex="0"
>
  {#if text}
    {text}
  {:else}
    <slot />
  {/if}
  {#if loading}
    <div class="buttonLoader">
      <svg fill="#FFFFFF" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M8,1V2.8A5.2,5.2,0,1,1,2.8,8H1A7,7,0,1,0,8,1Z"></path> </g> </g></svg>
    </div>
  {/if}
</div>

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

  .button {
    user-select: none;
    position: relative;
    width: max-content;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.005em;
    background: #f0ede8;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

    .buttonLoader {
      position: absolute;
      width: 24px;
      height: 24px;
      left: calc(50% - 15px);
      top: calc(50% - 10px);
      transform: translate(-50%, -50%);
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      fill: #FFFFFF;
      z-index: 1;
      animation: lds-dual-ring 1s linear infinite;
    }

    &:hover {
      background: #d9d7cc;
    }

    &:active {
      background: #bfbdb4;
    }

    &.primary {
      background: $orange500;
      color: #FFFFFF;

      &:hover {
        background: $orange600;
      }

      &:disabled {
        background: #00467F;
      }

      &:active {
        background: $orange800;
      }
    }

    &.small {
      padding: 4px 20px;
      border-radius: 8px;
      font-size: 14px;
      line-height: 20px;
    }

    &.big {
      width: 100%;
      height: 100%;
      font-size: 40px;
      font-weight: 600;
      line-height: 52px;
      border-radius: 64px;
      text-wrap: wrap;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    &.formButton {
      border-radius: 12px;
      height: 64px;
    }

    &.bigTwo {
      padding: 20px 59.5px;
      font-size: 24px;
      line-height: 32px;

      @include breakpoint-down('mobM') {
        font-size: 20px;
        line-height: 28px;
        padding: 20px 73.7px;
      }
    }

    &.loading {
      pointer-events: none;
      position: relative;
      animation: lds-dual-ring;
      overflow: hidden;

      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: $orange500;
      }
    }
  }

  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>