import { LightningElement, api } from "lwc";
import cx from "classnames";
export default class TabPanel extends LightningElement {
    @api index!: number;
    @api groupId!: string;
    @api active: boolean = false;

    private get tabId() {
        return `tabs--${this.groupId}--tab--${this.index}`;
    }

    private get panelId() {
        return `tabs--${this.groupId}--panel--${this.index}`;
    }

    private get activeTabIndex() {
        return this.active ? 0 : -1;
    }

    private get className() {
        return cx("tabpanel", this.active && "tabpanel-active");
    }

    private get panelHidden() {
        return !this.active;
    }
}