<template>
  <Icon
    :icon="iconName"
    :class="iconClasses"
    :style="iconStyles"
  />
</template>

<script setup>
import { Icon } from '@iconify/vue'
import { computed } from 'vue'

const props = defineProps({
  // Icon name from Remix Icon set (e.g., 'ri:home-line', 'ri:settings-3-line')
  name: {
    type: String,
    required: true
  },
  // Size: 'xs', 'sm', 'md', 'lg', 'xl', or custom size
  size: {
    type: String,
    default: 'md'
  },
  // Color: any Tailwind color class or custom color
  color: {
    type: String,
    default: 'current'
  },
  // Additional CSS classes
  class: {
    type: String,
    default: ''
  }
})

// Compute icon name with ri: prefix if not provided
const iconName = computed(() => {
  if (props.name.startsWith('ri:')) {
    return props.name
  }
  return `ri:${props.name}`
})

// Size mapping to Tailwind classes
const sizeClasses = {
  'xs': 'w-3 h-3',
  'sm': 'w-4 h-4',
  'md': 'w-5 h-5',
  'lg': 'w-6 h-6',
  'xl': 'w-8 h-8'
}

// Compute icon classes
const iconClasses = computed(() => {
  const classes = []

  // Add size class
  if (sizeClasses[props.size]) {
    classes.push(sizeClasses[props.size])
  }

  // Add color class if it's a Tailwind color
  if (props.color !== 'current' && !props.color.startsWith('#')) {
    classes.push(`text-${props.color}`)
  }

  // Add custom classes
  if (props.class) {
    classes.push(props.class)
  }

  return classes.join(' ')
})

// Compute icon styles for custom colors
const iconStyles = computed(() => {
  if (props.color.startsWith('#')) {
    return { color: props.color }
  }
  return {}
})
</script>

<style scoped>
/* Icon component styles using Tailwind utilities */
</style>
