/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

import { html } from '../bootstrap/bootstrap'
import { useLayoutState } from '../state/layout-state'

export const TitleScreen = () => {
	const layoutState = useLayoutState()

	const renderSubtitle = () => {
		if (layoutState.subtitle.get()) {
			return html`<h2 id="subtitle">${layoutState.subtitle.get()}</h2>`
		}
		return null
	}
	return html`<div id="title-screen">
		<h1 id="title">${layoutState.title.get()}</h1>
		${renderSubtitle()}
		<button onclick=${() => {
			layoutState.currentRoute.set('story')
		}}>Begin</button>
	</div>`
}