<script lang="ts">
  import { inview } from 'svelte-inview'
  import { fade } from 'svelte/transition'
  import { _ } from 'svelte-i18n'

  const CHIPS = [
    ['intl', 'language'],
    ['cicd', 'autorenew'],
    ['auto', 'automation'],
    ['test', 'bug_report'],
    ['bd', 'database'],
    ['android', 'android'],
    ['web', 'bookmark'],
    ['systems', 'terminal'],
    ['mvp', 'experiment'],
    ['design', 'edit'],
  ]

  let chips = $state([])

  function addChip() {
    const c = CHIPS.pop()
    if (!c) return;
    chips.push(c)
    setTimeout(addChip, 250)
  }

</script>
<div style="min-height: 80vh;" 
  use:inview 
  oninview_enter={()=>setTimeout(addChip, 300)}
  >
  <h5 id="capabilities" class="center-align primary-text">{$_('cards.title')}</h5>
  <div class="grid large-margin large-space">
    {#each chips as [title, icon]}
    <article class="transparent s6 m4 l3 small-height" in:fade>
      <nav class="vertical center-align">
        <h6>{$_(`cards.${title}`)}</h6>
        <i class="extra primary-text">{icon}</i>
      </nav>
    </article>
    {/each}
  </div>
</div>
