<script lang="ts">
	export let area = '';
	export let listTitle = 'List';
</script>

<div class="container" style={'--area:' + area}>
	<div class="header">
		{listTitle}
	</div>
	<div class="list">
		<slot />
	</div>
</div>

<style>
	.container {
		grid-area: var(--area);
		display: grid;
		grid-template-areas:
			'list-header'
			'list-content';
		grid-template-rows: 2rem calc(100% - 2rem);
		grid-template-columns: 100%;
		min-height: none;
		max-height: 100%;
	}

	.header {
		grid-area: list-header;
		line-height: 2;
		font-weight: bold;
		text-align: center;
		border: 1px solid var(--color-text);
	}

	.list {
		grid-area: list-content;
		min-height: none;
		max-height: 100%;
		overflow: hidden;
    border: 1px solid var(--color-text);
	}
</style>