<template>
  <span class="chip" :class="appliedColor"><slot></slot></span>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { ChipColor } from '@/models';

interface Props {
  color?: ChipColor;
}

const props = withDefaults(defineProps<Props>(), {
  color: ChipColor.Grey,
});

const appliedColor = computed(() => {
  if (!Object.values(ChipColor).includes(props.color)) {
    return ChipColor.Grey;
  }
  return props.color;
});
</script>

<style lang="scss" scoped>
.chip {
  --chip-color: transparent;
  --chip-background-color: transparent;

  display: flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--chip-color);
  background-color: var(--chip-background-color);
  cursor: default;

  &.green {
    --chip-color: var(--bms-green-100);
    --chip-background-color: var(--bms-green-25);

    &:hover {
      --chip-background-color: var(--bms-green-50);
    }
  }

  &.red {
    --chip-color: var(--bms-red-100);
    --chip-background-color: var(--bms-red-25);

    &:hover {
      --chip-background-color: var(--bms-red-50);
    }
  }

  &.purple {
    --chip-color: var(--bms-main-analog-100);
    --chip-background-color: var(--bms-main-analog-25);

    &:hover {
      --chip-background-color: var(--bms-main-analog-50);
    }
  }
  &.blue {
    --chip-color: var(--bms-main-100);
    --chip-background-color: var(--bms-main-25);

    &:hover {
      --chip-background-color: var(--bms-main-50);
    }
  }

  &.grey {
    --chip-color: var(--bms-grey-100);
    --chip-background-color: var(--bms-grey-25);

    &:hover {
      --chip-background-color: var(--bms-grey-50);
    }
  }

  &.orange {
    --chip-color: var(--bms-orange-100);
    --chip-background-color: var(--bms-orange-25);

    &:hover {
      --chip-background-color: var(--bms-orange-50);
    }
  }
}
</style>
