<template>
  <div class="language-list">
    <span
      v-for="item in langList"
      :title="item.title"
      :class="item.icon"
      :aria-label="item.title"
    ></span>
  </div>
</template>

<script setup lang="ts">
interface LangListItem {
  icon: string;
  title: string;
}

const langList: LangListItem[] = [
  { icon: 'icon-html5', title: 'Web development (HTML5 / CSS3 / SASS)' },
  { icon: 'icon-language-javascript', title: 'JavaScript' },
  { icon: 'icon-language-typescript', title: 'TypeScript' },
  { icon: 'icon-nodejs', title: 'Node.js' },
  { icon: 'icon-nestjs', title: 'Nest.js' },
  { icon: 'icon-svelte-logo', title: 'Svelte' },
  { icon: 'icon-angular', title: 'Angular' },
  { icon: 'icon-vuejs', title: 'Vue.js (version 3+)' },
  { icon: 'icon-react', title: 'React' },
  { icon: 'icon-nuxt', title: 'Nuxt' },
  { icon: 'icon-flutter', title: 'Flutter' },
  { icon: 'icon-language-python', title: 'Python' },
  { icon: 'icon-language-lua-variant', title: 'Lua' },
];
</script>
