<template>
  <div class="tag" :class="{ active, disabled, small }" @click="emits('click')">
    <slot></slot>
    <span class="dismiss-button" v-if="canBeDismissed">
      <BmsIconButton @click.stop="emits('dismiss')">
        <slot name="closeIcon"><X /></slot>
      </BmsIconButton>
    </span>
  </div>
</template>

<script setup lang="ts">
import { BmsIconButton } from '@/index';
import { X } from 'lucide-vue-next';

interface Props {
  active?: boolean;
  disabled?: boolean;
  canBeDismissed?: boolean;
  small?: boolean;
}

withDefaults(defineProps<Props>(), {
  active: false,
  disabled: false,
  canBeDismissed: true,
});

const emits = defineEmits(['dismiss', 'click']);
</script>

<style lang="scss" scoped>
.tag {
  --tag-border-color: var(--bms-main-100);
  --tag-background-color: transparent;
  --tag-color: var(--bms-main-100);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--bms-border-radius-xlarge);
  border: 1px solid var(--tag-border-color);
  width: fit-content;
  padding: 4px 8px;
  line-height: normal;
  font-size: 14px;
  color: var(--tag-color);
  background-color: var(--tag-background-color);
  cursor: pointer;

  &.disabled {
    pointer-events: none;
    cursor: default;
    --tag-color: var(--bms-grey-50);
    --tag-border-color: var(--bms-grey-50);

    &.active {
      --tag-color: var(--bms-white);
      --tag-background-color: var(--bms-grey-50);
    }
  }

  &.small {
    padding: 0px 4px;
    margin-block: 1px;
    gap: 4px;
  }

  &:focus,
  &:hover {
    --tag-color: var(--bms-main-140);
    --tag-border-color: var(--bms-main-140);
  }

  &.active {
    --tag-color: var(--bms-white);
    --tag-background-color: var(--bms-main-100);
    &:focus,
    &:hover {
      --tag-border-color: var(--bms-main-140);
      --tag-background-color: var(--bms-main-140);
    }
  }

  :deep(svg) {
    width: 14px;
    height: 14px;
  }

  .dismiss-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--tag-background-color);
    color: var(--tag-color);

    :deep(.bms-button) {
      color: currentColor;
      padding: 0;
      height: fit-content;

      .content {
        margin: 0;
      }

      &:hover {
        background-color: var(--tag-background-color);
      }
    }
  }
}
</style>
