<script setup lang="ts">
import { computed } from 'vue'
import {
    EyeOutlined,
    EyeInvisibleOutlined,
    SearchOutlined,
    CloseOutlined,
    RightOutlined,
    LeftOutlined,
} from '@ant-design/icons-vue'
import type { IconProps } from '@/interface'

const props = withDefaults(defineProps<IconProps>(), {
    icon: '',
})

const iconMap: Record<string, any> = {
    eye: EyeOutlined,
    'eye-off': EyeInvisibleOutlined,
    search: SearchOutlined,
    close: CloseOutlined,
    'arrow-right': RightOutlined,
    'arrow-left': LeftOutlined,
}

const IconComponent = computed(() => iconMap[props.icon])
</script>

<template>
    <component :is="IconComponent" :style="{ fontSize: size, color }" :class="props.class" />
</template>
