<template>
    <div class="hy-list-icon" :class="colorParsed">
        <slot v-if="$slots.default" />
        <i v-if="icon != undefined" :class="icon"></i>
    </div>
</template>

<script>
export default {
    name: "HyListIcon",
    props: {
        icon: {
            type: String,
            default: undefined,
        },
        color: {
            type: String,
            default: "transparent",
        },
    },
    computed: {
        colorParsed() {
            let allowed = ["transparent", ...Object.keys(this.hy_brand_theme.colors)];

            if (allowed.includes(this.color)) return this.color;
            else return "transparent";
        },
        backgroundColor() {
            if (this.colorParsed == "transparent") return "transparent";
            return `var(--hy-variant-${this.colorParsed}-bg-color)`;
        },
        iconColor() {
            if (this.colorParsed == "transparent") return "var(--hy-font-color-contrast)";
            return `var(--hy-variant-${this.colorParsed}-font-color)`;
        },
    },
    created() {},
    components: {},
};
</script>

<style lang="scss">
.hy-list-icon {
    --size: 30px;

    width: var(--size);
    max-width: var(--size);
    min-width: var(--size);
    height: var(--size);
    max-height: var(--size);
    min-height: var(--size);

    margin: 0;
    border-radius: 7px;
    display: grid;
    place-items: center;

    // Colors
    background-color: v-bind("backgroundColor");

    * {
        color: v-bind("iconColor");
    }
}
</style>
