<script setup lang="ts">
import type { HTMLAttributes } from 'vue';
import { cn } from '@/lib/utils';

interface Props {
  /**
   * Icon class generated by UnoCSS preset-icons / ds-icons.
   *
   * Example: `i-material-symbols-help`
   */
  icon: string;

  /**
   * Accessible label for the icon. When provided, the icon is exposed as `role="img"`.
   * If omitted, the icon is treated as decorative (`aria-hidden="true"`).
   */
  ariaLabel?: string;

  /**
   * Override the implicit role. Useful for spinner-like icons (`role="status"`).
   */
  role?: string;

  class?: HTMLAttributes['class'];
}

const props = defineProps<Props>();
</script>

<template>
  <span
    data-slot="icon"
    :class="cn(props.icon, props.class)"
    :role="props.role ?? (props.ariaLabel ? 'img' : undefined)"
    :aria-label="props.ariaLabel"
    :aria-hidden="props.ariaLabel ? undefined : 'true'"
  />
</template>
