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

interface TabPageArgs {
	navCaption: string;
	navCaptionShort?: string;
	tabCaption?: string;
	escapeCaption?: boolean;
	icon: string;
	uuid?: string;
}

@Component
class TabPageComponent extends TsxComponent<TabPageArgs> implements TabPageArgs {
	@Prop() navCaption!: string;
	@Prop() navCaptionShort!: string;
	@Prop() tabCaption!: string;
	@Prop() escapeCaption?: boolean;
	@Prop() icon!: string;
	@Prop() uuid!: string;
	active: boolean = false;

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

SlotNameIdentifier(TabPageComponent, 'TabPage');
export const TabPage = toNative(TabPageComponent);