<script setup>
// import icons
import checkIcon from '../../assets/svg/check.svg';
import cubeIcon from '../../assets/svg/cube.svg';
import cube2Icon from '../../assets/svg/cube-twice.svg';
import stackIcon from '../../assets/svg/stack.svg';

import { ref, computed } from 'vue';

const props = defineProps({
  name: {
    type: String,
    default: 'icon',
  },
  htmlRole: {
    type: String,
    default: 'icon', // 'icon' | 'logo'
  },
});

const icon = computed(() => {
  switch (props.name) {
    case 'icon':
    case 'cube':
      return cubeIcon;
    case 'cube-2':
      return cube2Icon;
    case 'stack':
      return stackIcon;
    case 'check':
      return checkIcon;
  }
});
</script>

<template>
  <div class="icon">
    <img :src="icon" :class="icon" />
  </div>
</template>

<style scoped>
.icon {
  height: 16px;
  width: 16px;
  background: #fff3;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
