<script lang="ts">
  import { BUTTON_ICON, BUTTON_TYPE, ICON_POSITION } from '../../type/global';
  import RenderIcon from './RenderIcon.svelte';

  export let type: BUTTON_TYPE = BUTTON_TYPE.DEFAULT;
  export let icon: BUTTON_ICON | undefined = undefined;
  export let iconPosition: ICON_POSITION | undefined = ICON_POSITION.LEFT;
  export let loading: undefined | boolean = false;
  export let disabled: undefined | boolean = false;
  export let text: string;
  export let className: string | undefined = '';
  export let onClick: () => void;
</script>

<div
  on:click={onClick}
  on:keydown={() => false}
  class="button {className} {type} {loading ? 'loading' : ''} {disabled ? 'disabled' : ''}"
  role="button"
  aria-label={text}
  tabindex="0"
>
  {#if iconPosition === ICON_POSITION.LEFT}
    {#if icon}
      <RenderIcon {icon} />
    {/if}
  {/if}
  {text}
  {#if iconPosition === ICON_POSITION.RIGHT}
    {#if icon}
      <RenderIcon {icon} />
    {/if}
  {/if}
</div>

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

  .button {
    @include button;

    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 9px 17px;
    border: 1px solid $black100;
    border-radius: 8px;
    background: $black;
    color: $grey;
    gap: 8px;
    user-select: none;
    cursor: pointer;
    transition: $transition;
    position: relative;
    overflow: hidden;

    @include breakpoint-down('tabS') {
      padding: 7px 13px;
    }

    :global(> svg) {
      width: 20px;
      height: 20px;
    }

    &:after {
      content: '';
      position: absolute;
      top: calc(50% - 10px);
      left: calc(50% - 10px);
      opacity: 0;
      pointer-events: none;
      width: 20px;
      height: 20px;
      animation: spin 2s linear 0s infinite;
    }

    &.small {
      padding: 6px;
    }

    &.transparent {
      border: 1px solid transparent;
      background: transparent;
      color: $grey200;
    }

    &.small-transparent {
      padding: 6px;
      border: 1px solid transparent;
      background: transparent;
      color: $grey200;
    }

    &.green {
      border-color: $green25;
      background: $green25;
      color: $green1000;

      :global(> svg path) {
        stroke: $black;
      }
    }

    &.show-more {
      background: $grey25;
      border-color: $grey25;
      color: $black;

      &:after {
        background-color: $grey25;
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 2.29215V5.62549M10.0001 15.6255V18.9588M5.00008 10.6255H1.66675M18.3334 10.6255H15.0001M15.8988 16.5242L13.5417 14.1672M15.8988 4.79211L13.5417 7.14913M4.10139 16.5242L6.45841 14.1672M4.10139 4.79211L6.45841 7.14913' stroke='%23B1AFB4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: center center;
      }
    }

    &.linked-in {
      background: $blue;
      border-color: $blue;

      &:hover {
        background: $blue50;
      }

      &:active {
        background: $blue100;
      }
    }

    &.instagram {
      border: none;
      background: radial-gradient(
          182.65% 122.8% at 84.5% 113.5%,
          #ff1b90 24.39%,
          #f80261 43.67%,
          #ed00c0 68.85%,
          #c500e9 77.68%,
          #7017ff 89.32%
        ),
        radial-gradient(
          51.8% 49.8% at 36.25% 96.55%,
          #ffd600 0%,
          #ff6930 48.44%,
          #fe3b36 73.44%,
          rgba(254, 59, 54, 0) 100%
        );
    }

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

      &:after {
        opacity: 1;
      }
    }

    &.disabled {
      pointer-events: none;
      opacity: .7;
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>