<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  export let moreAvailable: boolean = false;
  export let isLoading: boolean = false;
  let displayText = '';
  let title = '';
  let disabled: boolean;

  $: displayText = isLoading ? 'Loading...' : 'Load More';
  $: disabled = !moreAvailable || isLoading;
  $: title = moreAvailable ? 'Load More' : 'No more posts available';

  const dispatch = createEventDispatcher();

  function loadOlderPosts() {
    dispatch('loadOlderPosts');
  }
</script>

<button on:click={loadOlderPosts} {disabled} {title}>{displayText}</button>

<style>
  button {
    padding: 0.75em;
    border-radius: 3px;
    border: none;
    background-color: var(--color-link);
    color: white;
    cursor: grab;
    transition: all 0.2s ease-in-out;
  }
  button:hover:not(:disabled) {
    background-color: var(--color-link-visited);
  }
  button:disabled {
    cursor: not-allowed;
    background-color: grey;
  }
</style>