<template>
  <span :class="['chip', `chip--${variant}`]" v-bind="$attrs">
    <slot />
  </span>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error'
}>(), { variant: 'default' })
</script>

<style scoped lang="scss">
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;

  &--default {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
  }

  &--primary {
    background: var(--color-primary);
    color: var(--color-primary-fg);
  }

  &--success {
    background: #d4edda;
    color: #155724;
  }

  &--warning {
    background: #fff3cd;
    color: #856404;
  }

  &--error {
    background: #f8d7da;
    color: #721c24;
  }
}
</style>
