<script lang="ts">
	export let title: string;
	export let description: string;
</script>

<article class="main-container">
	{#if title || description}
		<div class="header">
			<div class="title">
				<h2>{title}</h2>
				<slot name="top-left" />
			</div>
			{#if description && description?.length > 0}
				<label>{description}</label>
			{/if}
		</div>
	{/if}

	<slot></slot>
</article>

<style lang="scss">
	article {
		position: relative;
		display: flex;
		flex-direction: column;
		flex-wrap: unset;
		display: flex;
		gap: 1rem;
	}

	.header {
		display: flex;
		flex-direction: column;

		.title {
			display: flex;
			justify-content: space-between;
		}
	}
</style>
