<template>
  <div class="icon-container">
    <component
      :is="iconComponent?.component"
      :style="styles"
      :class="props.class"
    />
    <span>
      <slot></slot>
    </span>
  </div>
</template>

<script setup lang="ts">
  import { computed, type CSSProperties } from "vue";
  import type { IconProps } from "./interface";
  import { iconMap } from "./icon";

  const props = withDefaults(defineProps<IconProps>(), {
    size: 20,
    color: "currentColor",
  });

  const iconComponent = computed(() => iconMap.get(props.name));

  const styles = computed(() => {
    const style: CSSProperties = {};
    if (typeof props.size === "number") {
      style.width = `${props.size}px`;
      style.height = `${props.size}px`;
    } else {
      style.width = props.size;
      style.height = props.size;
    }

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

    if (typeof props.style === "string") {
      return props.style;
    }

    return {
      ...style,
      ...props.style,
    };
  });
</script>
<style lang="scss" scoped>
  .icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
</style>
