<script lang="ts">
	import type { Snippet } from 'svelte';

	let {
		title,
		subtitle,
		isPlaceholder = false,
		placeholderMessage = 'Bientôt disponible',
		children
	}: {
		title: string;
		subtitle?: string | undefined;
		isPlaceholder?: boolean;
		placeholderMessage?: string;
		children?: Snippet;
	} = $props();
</script>

<section class="dashboard-section" class:placeholder={isPlaceholder}>
	<header class="section-header">
		<h2 class="section-title">{title}</h2>
		{#if subtitle}
			<p class="section-subtitle">{subtitle}</p>
		{/if}
	</header>

	<div class="section-content">
		{#if isPlaceholder}
			<div class="placeholder-content">
				<span class="placeholder-icon">🚧</span>
				<p class="placeholder-message">{placeholderMessage}</p>
			</div>
		{:else if children}
			{@render children()}
		{/if}
	</div>
</section>

<style>
	.dashboard-section {
		background: white;
		border-radius: 1rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.section-header {
		padding: 1rem 1.5rem;
		border-bottom: 1px solid #e5e7eb;
	}

	.section-title {
		margin: 0;
		font-size: 1.125rem;
		font-weight: 600;
		color: #1f2937;
	}

	.section-subtitle {
		margin: 0.25rem 0 0;
		font-size: 0.875rem;
		color: #6b7280;
	}

	.section-content {
		padding: 1.5rem;
	}

	.placeholder .section-content {
		background: #f9fafb;
	}

	.placeholder-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		padding: 2rem;
		text-align: center;
	}

	.placeholder-icon {
		font-size: 2rem;
	}

	.placeholder-message {
		margin: 0;
		color: #6b7280;
		font-size: 0.875rem;
	}
</style>
