<template>
  <svg
    :viewBox="iconData.viewBox"
    :aria-label="ariaLabel"
    :aria-hidden="ariaLabel ? undefined : 'true'"
    xmlns="http://www.w3.org/2000/svg"
    class="titan-icon"
    v-html="iconData.content"
  ></svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { iconRegistry, type IconName } from './icons/registry'

interface Props {
  name: IconName
  ariaLabel?: string
}

const props = defineProps<Props>()

// Parse icon name parts once at setup time
const [namespace, iconName] = props.name.split('/')

// Computed property with simple validation and lookup
const iconData = computed(() => {
  if (!iconRegistry[namespace]) {
    const available = Object.keys(iconRegistry).join(', ')
    throw new Error(
      `Icon namespace "${namespace}" not found. Available: ${available}`
    )
  }

  if (!iconRegistry[namespace][iconName]) {
    const available = Object.keys(iconRegistry[namespace]).join(', ')
    throw new Error(
      `Icon "${iconName}" not found in namespace "${namespace}". Available: ${available}`
    )
  }

  return iconRegistry[namespace][iconName]
})
</script>

<style scoped>
.titan-icon {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
</style>
