<script lang="ts">
  import loader from '../../assets/images/loader.svg';

  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"
>
  {text}
  {#if loading}
    <div class="buttonLoader">
      <img src={loader} alt="" />
    </div>
  {/if}
</div>

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

  .button {
    user-select: none;
    position: relative;
    width: max-content;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.005em;
    background: #f0ede8;
    border-radius: 16px;
    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: 0;
      animation: lds-dual-ring 1.5s linear infinite;
    }

    &:hover {
      background: #d9d7cc;
    }

    &:active {
      background: #bfbdb4;
    }

    &.secondary {
    }

    &.primary {
      background: #fe4d0d;
      color: #fafafa;

      &:hover {
        background: #e83e01;
      }

      &:focus {
        background: #c63501;
      }

      &:disabled {
        background: #fe7f51;
      }

      &:active {
        background: #c63501;
      }
    }

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

    &.big {
      width: 100%;
      border-radius: 16px;
      padding: 20px;
      text-align: center;

      .buttonLoader {
        left: calc(50% - 20px);
        top: calc(50% - 10px);
      }
    }

    &.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;
      background: #e83e01;
      color: transparent;

      .buttonLoader {
        opacity: 1;
      }
    }
  }

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