<script setup lang="ts">
import { isDark } from '../composables/dark'
import { sponsors } from '../../config/sponsors'
const sponsorList = sponsors.filter((_) => !_.type)
</script>

<template>
  <div class="container">
    <div
      v-for="item in sponsorList"
      :key="item.name"
      :class="['sponsor-item', item.isDark && isDark ? 'filter invert' : '']"
    >
      <a :href="item.url" :title="item.name" target="_blank">
        <img :src="item.img" :alt="item.name" />
      </a>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  .sponsor-item {
    margin-right: 4px;

    a {
      display: inline-flex;
      align-items: center;

      img {
        width: 36px;
        height: 36px;
      }
    }
  }
}
</style>
