<template>
  <span class="inline-flex items-center justify-center leading-none select-none" :style="computedStyle" :title="title"
    :aria-hidden="title ? undefined : 'true'" :role="title ? 'img' : undefined">
    {{ glyph }}
  </span>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { iconsMap } from "@/assets/fonts/znicons";

const props = withDefaults(
  defineProps<{
    name: string;
    size?: number | string;
    color?: string;
    title?: string;
  }>(),
  {
    size: 16,
  },
);

const glyph = computed(() => {
  const value = (iconsMap as Record<string, string>)[props.name];
  return value ?? "";
});

const computedStyle = computed(() => {
  const style: Record<string, string> = {
    fontFamily: "znicons",
  };

  const size = props.size;
  style.fontSize = typeof size === "number" ? `${size}px` : size;

  if (props.color) {
    style.color = props.color;
  }

  return style;
});
</script>
