<script lang="ts">
  import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
  import Fa from 'svelte-fa';
  import Spinner from './Spinner.svelte';

  export let icon: IconDefinition | undefined = undefined;
  export let style: 'default' | 'red' | 'white' | 'dark' | 'accent' = 'default';
  export let onClick: void | (() => void) | ((e: MouseEvent) => void) | undefined = undefined;
  export let tabindex: number | undefined = undefined;
  export let disabled: boolean = false;
  export let full: boolean = false;
  export let xButton: boolean = false;
  export let large: boolean = false;
  export let small: boolean = false;
  export let iconOnly: boolean = false;
  export let loading: boolean = false;
  export let title: string | undefined = undefined;

  function click(e: MouseEvent) {
    if (onClick) onClick(e);
  }

  $: isDisabled = loading || disabled;
</script>

<button
  class="h-10 px-4 py-2 bg-button-secondary-active-solid hover:bg-button-secondary-selected active:bg-button-secondary-active-solid text-text-primary disabled:bg-button-disabled disabled:text-text-disabled transition-colors font-semibold rounded-lg justify-center items-center gap-2 inline-flex break-words line-clamp-1"
  class:style-red={style === 'red'}
  class:style-white={style === 'white'}
  class:style-dark={style === 'dark'}
  class:style-accent={style === 'accent'}
  class:w-full={full}
  class:x={xButton}
  class:sm={small}
  class:!h-12={large}
  disabled={isDisabled}
  class:cursor-not-allowed={isDisabled}
  {title}
  on:click={click}
  {tabindex}>
  {#if !loading}
    {#if icon}
      <Fa {icon} size="xs" />
    {/if}
    {#if xButton && !iconOnly}
      <span class="contents"><slot /></span>
    {:else}
      <slot />
    {/if}
  {:else}
    <Spinner small={small || xButton} />
  {/if}
</button>

<style lang="postcss">
  button.style-red {
    @apply bg-red-500 hover:bg-red-400 active:bg-red-500;
  }

  button.style-white {
    @apply bg-text-header hover:bg-text-primary active:bg-text-header text-item;
  }

  button.style-dark {
    @apply backdrop-blur-3xl bg-button-dark-transparent-fill hover:bg-button-secondary-selected active:bg-button-dark-fill text-text-header;
  }

  button.style-accent {
    @apply bg-accent hover:bg-accent-hover active:bg-accent-active text-text-header;
  }

  button.x {
    @apply rounded-full font-normal h-fit min-h-[36.8px] p-3;
  }

  button.x.sm {
    @apply py-2;
  }

  button.x > span {
    @apply block whitespace-nowrap leading-[.8];
  }
</style>
