import { LightningElement, api } from "lwc";
import { track } from "dxUtils/analytics";

export default class Feature extends LightningElement {
    @api label!: string;
    @api header!: string;
    @api imageSrc!: string;
    @api buttonHref: string | null = null;
    @api buttonLabel: string | null = null;
    @api descriptionPosition?: "right" | "left" = "left";
    @api isExternalLink: boolean = false;
    @api variant?: "display";

    private get isDisplay(): boolean {
        return this.variant === "display";
    }

    private get sectionClass(): string {
        return this.descriptionPosition === "left"
            ? "description-left"
            : "description-right";
    }

    get hasLabel(): boolean {
        return !!this.label;
    }

    get target(): string {
        return this.isExternalLink ? "_blank" : "_self";
    }

    get iconSymbol(): string {
        return this.isExternalLink ? "new_window" : "";
    }

    handleClick(event: Event) {
        const payload = {
            click_text: this.buttonLabel,
            element_title: this.header,
            click_url: this.buttonHref,
            element_type: "button",
            content_category: "cta"
        };
        track(event.target!, "custEv_ctaButtonClick", payload);
        track(event.target!, "custEv_linkClick", payload);
    }
}