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

	interface Props {
		title: string;
		subtitle?: string | null;
		favourite?: boolean;
		onfavourite?: MouseEventHandler<HTMLButtonElement>;
	}

	let { title, subtitle, favourite, onfavourite }: Props = $props();
</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 focus-visible:bg-yellow-400/20 focus-visible:outline-hidden"
				title="Toggle favourite"
				onclick={onfavourite}
			>
				<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>