import { LightningElement, api } from "lwc";
import cx from "classnames";
import { Color, TypeBadgeSize } from "typings/custom";
import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";

export default class MetadataBadge extends LightningElement {
    @api size: TypeBadgeSize = "default";
    @api color?: Color;
    @api value!: string;

    private get className(): string {
        return cx("badge", `size-${this.size}`);
    }

    private get style(): string {
        if (this.color) {
            const variables = colorToDxColors(this.color as Color);
            if (variables) {
                return buildStyleColorVariables(variables);
            }
        }
        return "";
    }
}