<script lang='ts' setup>
const { type = "primary", size = "medium", round = false } = defineProps<{
  type?: "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger";
  size?: "mini" | "small" | "medium" | "large";
  round?: boolean;
}>();
</script>

<template>
  <div class="ui-tag" :class="[type, size, { 'rounded-full': round }]">
    <slot />
  </div>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

.ui-tag {
  @apply px-3 py-1 text-xs rounded-md inline-block;
}
.ui-tag.primary {
  @apply bg-(--ion-color-dark) text-white;
}
.ui-tag.secondary {
  @apply bg-(--ion-color-medium-shade) text-white;
}
.ui-tag.tertiary {
  @apply bg-(--ion-color-light-shade) text-black;
}
.ui-tag.success {
  @apply bg-(--ion-color-success) text-white;
}
.ui-tag.warning {
  @apply bg-(--ion-color-warning) text-white;
}
.ui-tag.danger {
  @apply bg-(--ion-color-danger) text-white;
}
.ui-tag.mini {
  @apply text-[10px] px-1 py-0.5 rounded-sm;
}
.ui-tag.small {
  @apply text-xs px-2 py-0.5 rounded-sm;
}
.ui-tag.medium {
  @apply text-sm px-3 py-1 rounded-md;
}
.ui-tag.large {
  @apply text-base px-4 py-2 rounded-md;
}
</style>
