vore-scenario-generator/src/common/template/TableHeader.tsx

import slug from 'slug';

// TODO: reconstitute the three things here

export type TableFullProps = TableIdentifierFullProps & TableHeaderFullProps & TableEmojiProps & TableTitleProps
export type TableLimitedProps = TableIdentifierLimitedProps & TableHeaderLimitedProps & TableEmojiProps & TableTitleProps
export type TableProps = TableFullProps|TableLimitedProps
export interface TableIdentifierFullProps {
	identifier: string
	title: string
}

export interface TableIdentifierLimitedProps {
	identifier?: null
	title: string
}

export type TableIdentifierProps = TableIdentifierFullProps|TableIdentifierLimitedProps

export function tableIdentifier({ identifier, title }: TableIdentifierProps): string {
	if (typeof identifier === 'string') {
		return slug(identifier);
	} else {
		return slug(title);
	}
}

export interface TableHeaderFullProps {
	ordinal: number,
	id: number,
	name: string,
	identifier: string
}

export interface TableHeaderLimitedProps {
	ordinal: number,
	id?: null,
	name?: null,
	identifier?: null
}

export type TableHeaderProps = TableHeaderFullProps|TableHeaderLimitedProps

export function TableHeaderDataset({ ordinal, id, name, identifier }: TableHeaderProps): Record<`data-${string}`, string> {
	if (typeof identifier === "string") {
		return {
			"data-ordinal": `${ordinal}`,
			"data-id": `${id}`,
			"data-name": name,
			"data-identifier": identifier
		}
	} else {
		return {
			"data-ordinal": `${ordinal}`,
		}
	}
}

export interface TableEmojiProps {
	emoji: string
}

export function TableEmoji({emoji}: TableEmojiProps) {
	return <span class="tableEmoji">{emoji}</span>
}

export interface TableTitleProps {
	title: string
}

export function TableTitle({title}: TableTitleProps) {
	return <span class="tableTitle">{title}</span>
}