<script setup>
import { useLabel } from '../composable/useLabel.js';

const props = defineProps({
  color: {
    type: String,
    default: '',
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  isRemove: {
    type: Boolean,
    default: false,
  },
  iconPosition: {
    type: String,
    default: 'right',
    validator: (value) => ['left', 'right'].includes(value),
  },
  textLabel: {
    type: String,
    default: '',
  },
  textColor: {
    type: String,
    default: 'inherit',
  },
  size: {
    type: String,
    default: 'md',
    validator: (value) => ['sm', 'md', 'lg'].includes(value),
  },
  isOutline: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['clickLabel', 'click']);

const {
  colorWithOpacity,
  iconContent,
  handleClick ,
} = useLabel(props, emit);
</script>

<template>
  <div
    :class="[
      'tv-label',
      `tv-label-${size}`,
      {
        'tv-label--reverse': iconPosition === 'left',
        'tv-label--outline': isOutline
      }
    ]"
    :style="{
      backgroundColor: colorWithOpacity,
      color: textColor !== 'inherit' ? textColor : (color || 'inherit'),
      border: isOutline ? `1px solid ${color}` : 'none',
    }"
    @click="handleClick"
  >
    <template v-if="textLabel">{{ textLabel }}</template>
    <slot v-else></slot>
    <span
      v-if="isEdit || isRemove"
      v-html="iconContent"
      class="tv-label-icon"
      :class="`tv-icon-position-${iconPosition}`"
    />
  </div>
</template>

<style></style>
