import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { SlotNameIdentifier } from '../../common/slot-name-identifier';

interface WizardTabArgs {
	id: string;
	title: string;
	subtitle?: string;
	icon: string;
	visible?: boolean;
}

@Component
class WizardTabComponent extends TsxComponent<WizardTabArgs> implements WizardTabArgs {
	@Prop() id!: string;
	@Prop() title!: string;
	@Prop() subtitle!: string;
	@Prop() icon!: string;
	@Prop() visible!: boolean;
	active: boolean = false;

	render(h) {
		return <div class="wizard-tab-wrap">{this.$slots.default?.()}</div>;
	}
}

SlotNameIdentifier(WizardTabComponent, 'WizardTab');
const WizardTab = toNative(WizardTabComponent);
export default WizardTab;