<script setup lang="ts">
/**
 * Tag — removable or static label chip.
 * Set `removable` to show the dismiss ×; emit `remove` is fired when clicked.
 * Optional `icon` prefix via Icon registry.
 */
import Icon from './Icon.vue'

withDefaults(
  defineProps<{
    icon?: string
    removable?: boolean
  }>(),
  { removable: false },
)

const emit = defineEmits<{
  remove: []
}>()
</script>

<template>
  <span :class="['cc-tag', !removable && 'cc-tag--static']">
    <Icon v-if="icon" :name="icon" :size="12" :stroke-width="2.25" />
    <span><slot /></span>
    <button
      v-if="removable"
      type="button"
      class="cc-tag__x"
      aria-label="Remove"
      @click="emit('remove')"
    >
      <Icon name="x" :size="11" :stroke-width="2.5" />
    </button>
  </span>
</template>

<style>
.cc-tag {
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 4px 0 9px;
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:500; line-height:1;
  color:var(--text-secondary); background:var(--surface-raised-2);
  border-radius:var(--radius-sm); box-shadow:var(--ring-default);
}
.cc-tag--static { padding:0 9px; }
.cc-tag__x {
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:var(--radius-xs); color:var(--text-tertiary); cursor:pointer; border:0; background:transparent;
  transition:var(--transition-colors);
}
.cc-tag__x:hover { background:var(--surface-active); color:var(--text-primary); }
</style>
