<template>
  <div class="circle-badge" :class="circleClasses">
    <component
        :is="iconComponent"
        weight="bold"
        :size="iconSize"
        class="circle-icon"
    />
  </div>
</template>

<script>
export default{
  name: "CircleBadge",
  props:{
    icon: {
      type: String,
      default: 'check'
    },
    variant: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary', 'grey', 'exception', 'skeleton', 'skeleton-grey'].includes(value)
    },
    size: {
      type: String,
      default: 'small',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  },
  computed: {
    circleClasses() {
      return [
        `circle-badge--${this.variant}`,
        `circle-badge--${this.size}`
      ]
    },
    iconComponent() {
      const iconName = this.icon.charAt(0).toUpperCase() + this.icon.slice(1);
      return `Ph${iconName}`;
    },
    iconSize() {
      const sizes = {
        small: 12,
        medium: 16,
        large: 20
      };
      return sizes[this.size];
    }
  }
}
</script>

<style scoped>

.circle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0.2rem solid transparent;
  transition: all 0.2s ease-in-out;
  outline: none;
  user-select: none;
  flex-shrink: 0;
}

/* Größen */
.circle-badge--small {
  width: 2.4rem;
  height: 2.4rem;
}

.circle-badge--medium {
  width: 3.2rem;
  height: 3.2rem;
}

.circle-badge--large {
  width: 4rem;
  height: 4rem;
}

/* Varianten */
.circle-badge--primary {
  background-color: #5AF0B4;
  color: #002F54;
}

.circle-badge--secondary {
  background-color: #c3cfdf;
  color: #002F54;
}

.circle-badge--exception {
  background-color: #BC2B72;
  color: #ffffff;
}

.circle-badge--grey {
  background-color: #DCDCDC;
  color: #002F54;
}

.circle-badge--skeleton {
  border: 0.1rem solid #002F54;
  background-color: transparent;
  color: #002F54;
}

.circle-badge--skeleton-grey {
  border: 0.1rem solid #6b7280;
  background-color: transparent;
  color: #6b7280;
}

.circle-badge--skeleton-primary {
  border: 0.1rem solid #5AF0B4;
  color: #5AF0B4;
}


.circle-icon {
  flex-shrink: 0;
}

</style>