<script lang="ts">
	interface Props {
		expanded: boolean;
		title: string;
	}

	let { expanded = $bindable(), title }: Props = $props();

	function onclick() {
		expanded = !expanded;
	}
</script>

<button class="flex items-center text-base hover:text-white" type="button" {onclick}>
	{#if expanded}
		<span class="icon-base icon-[material-symbols--expand-less]"></span>
	{:else}
		<span class="icon-base icon-[material-symbols--expand-more]"></span>
	{/if}
	{title}
</button>