<template>
  <div class="comp-status-dot">
    <div :class="`dot ${status}`"></div>
    <div class="content">
      <slot v-if="$slots.default" name="default" />
      <span v-else>{{ title }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue';

interface Props {
  status: string;
  title?: string;
}

withDefaults(defineProps<Props>(), {
  status: 'info',
  title: '',
});

// const statusClass = ref(props.status);
</script>

<style lang="scss" scoped>
.comp-status-dot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    &.info {
      background-color: var(--el-color-info);
    }
    &.primary {
      background-color: var(--el-color-primary);
    }
    &.warning {
      background-color: var(--el-color-warning);
    }
    &.success {
      background-color: var(--el-color-success);
    }
    &.error {
      background-color: var(--el-color-error);
    }
  }
  .content {
    margin-left: var(--margin-small);
  }
}
</style>
