<script lang="ts">
  import Spacer from '$lib/Layout/Spacer.svelte';
  export let count = 3;
  export let width = '100%';
  export let height = '100px';
  export let card = true;
  export let grid = false;
  export let list = false;
  export let pad = false;
  export let bigCard = false;
</script>

{#if grid}
  <div class="grid" style={pad ? 'padding-top: .75em;' : ''}>
    {#each Array(count) as _item, i}
      <div class={card ? `${bigCard ? 'card' : ''} card-small` : ''} style={`width: ${width};`}>
        <div class="skeleton-container" style={`--i: ${i};`}>
          <div class="skeleton" style={`width: ${width}; height: ${height};`}></div>
        </div>
      </div>
    {/each}
  </div>
{:else}
  {#each Array(count) as _item, i}
    <div
      class={card ? `${bigCard ? 'card' : ''} card-small` : ''}
      style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`}
    >
      <div class="skeleton-container">
        <div class="skeleton" style={`width: ${width}; height: ${height};`}></div>
      </div>
    </div>

    {#if !list && i < count - 1}
      <Spacer />
    {/if}
  {/each}
{/if}

<style>
  @keyframes progress {
    0% {
      background-position: -200px 0;
    }
    100% {
      background-position: calc(200px + 100%) 0;
    }
  }

  .skeleton-container {
    animation: progress 1.2s ease-in-out infinite;
    background-color: var(--base001);
    background-image: linear-gradient(90deg, var(--base0011), var(--base01), var(--base0011));
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 8px;
    animation-delay: calc(var(--i) * 0.025s);
  }

  .skeleton {
    border-radius: 4px;
    display: inline-block;
    line-height: 1;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em 0.5em;
  }
</style>
