<template>
  <i :class="iconClasses"></i>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'VIcon',
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: String,
      validator: (value: string) => ['sm', 'lg'].includes(value),
    },
  },
  setup(props) {
    const iconClasses = computed(() => {
      const classes = ['icon', `icon-${props.name}`];
      if (props.size) {
        classes.push(`icon-${props.size}`);
      }
      return classes;
    });

    return {
      iconClasses,
    };
  },
});
</script>

<style lang="scss" scoped>
// Basic icon styling - will be expanded in a later task
.icon {
  display: inline-block;
  // Add common icon styles here
}

// Placeholder for actual icon styles (e.g., using a font icon or SVG)
// These will be defined in a separate SCSS file (VIcon.scss)
.icon-alert:before {
  content: '⚠️'; // Example, replace with actual icon
}
.icon-search:before {
  content: '🔍'; // Example, replace with actual icon
}
.icon-close:before {
  content: '❌'; // Example, replace with actual icon
}

.icon-sm {
  font-size: 0.8em; // Example size
}

.icon-lg {
  font-size: 1.5em; // Example size
}
</style>
