<script lang="ts">
export default {
  name: "tree-tag",
};
</script>

<script setup lang="ts">
import { computed } from "vue";

interface Props {
  color?: string;
  height?: number;
  light?: boolean;
  autoTextColor?: boolean; // not implemented
}

// eslint-disable-next-line vue/no-setup-props-destructure
const {
  color = "primary",
  light = false,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  autoTextColor = false,
} = defineProps<Props>();

const isHex = (s: string) => s.startsWith("#");

const currentColor = computed(() => {
  return isHex(color) ? color : `var(--color-${color})`;
});
</script>

<template>
  <div class="tree-tag" :class="{ light: light }"><slot /></div>
</template>

<style scope lang="less">
.tree-tag {
  position: relative;
  display: inline-flex;
  background: v-bind(currentColor);
  border-radius: 4px 4px 4px 0;
  padding: 0 4px;

  &::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    left: 0;
    bottom: -4px;
    background: linear-gradient(
      to bottom right,
      v-bind(currentColor),
      50%,
      v-bind(currentColor),
      50%,
      transparent
    );
  }
}

:where(.tree-tag) {
  color: #fff;
}

:where(.tree-tag.light) {
  color: #000;
}
</style>
