<script lang="ts">
	import Star from '$lib/icons/Star.svelte';
	import { createEventDispatcher } from 'svelte';

	export let title: string;
	export let subtitle: string | null = '';
	export let favourite: boolean | undefined = undefined;

	const dispatch = createEventDispatcher<{ favourite: null }>();
</script>

<div class="flex flex-wrap gap-x-4">
	<div class="flex overflow-hidden">
		{#if favourite !== undefined}
			<button
				type="button"
				class="mr-1 flex items-center"
				title="Toggle favourite"
				on:click={() => dispatch('favourite')}
			>
				<Star large hoverable {favourite} />
			</button>
		{/if}
		<h1 class="xl:ellipsis-nowrap text-2xl font-semibold">{title}</h1>
	</div>

	{#if subtitle}
		<h2 class="xl:ellipsis-nowrap self-end text-lg font-light text-gray-400">
			{subtitle}
		</h2>
	{/if}
</div>