import { LightningElement, api } from "lwc";
import cx from "classnames";
import {
    LightningSlotElement,
    IconSprite,
    IconSymbol,
    IconBadgeShape
} from "typings/custom";
import { isSlotEmpty, stopPropagationOnSlotted } from "dxUtils/slot";

export default class CardSmall extends LightningElement {
    @api badgeBackgroundColor?: string = "indigo-vibrant-50";
    @api badgeColor: string = "white";
    @api badgeShape?: IconBadgeShape = "circle";
    @api badgeSprite?: IconSprite = "utility";
    @api badgeSymbol?: IconSymbol;
    @api body?: string = "";
    @api borderless?: boolean = false;
    @api href!: string;
    @api target?: string | null = null;
    @api header!: string;

    private isSlotEmpty: boolean = false;

    private get className(): string {
        return cx(
            "card-small",
            "dx-card-base",
            this.badgeSymbol && "has-icon",
            this.borderless && "dx-card-base_borderless"
        );
    }

    private onSlotChange(e: LightningSlotElement): void {
        this.isSlotEmpty = isSlotEmpty(e);
        stopPropagationOnSlotted(e);
    }
}