<script lang="ts">
	import Icon, { type IconName } from './Icon.svelte';

	export interface FeatureItem {
		icon: IconName;
		title: string;
		description: string;
	}

	interface Props {
		items: FeatureItem[];
		/** Taille minimale des colonnes de la grille (primitive .grid). */
		min?: string;
	}

	let { items, min = '15rem' }: Props = $props();
</script>

<div class="feature-cq">
	<ul class="grid" role="list" style:--grid-min={min}>
		{#each items as item (item.title)}
			<li class="feature-card">
				<span class="feature-icon"><Icon name={item.icon} /></span>
				<div class="feature-text">
					<h3>{item.title}</h3>
					<p>{item.description}</p>
				</div>
			</li>
		{/each}
	</ul>
</div>

<style>
	/* Container query : la carte passe en disposition horizontale
	   quand son conteneur (pas le viewport) est assez large. */
	.feature-cq {
		container-type: inline-size;
	}

	.feature-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		padding: var(--space-4);
		background: var(--glass);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid var(--glass-border);
		border-radius: var(--radius-2);
	}

	.feature-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		flex-shrink: 0;
		border-radius: var(--radius-1);
		color: var(--page-accent-text, var(--accent-text));
		background: color-mix(in oklch, var(--page-accent, var(--accent)) 14%, transparent);
	}

	h3 {
		font-size: var(--text-1);
		margin-block-end: var(--space-1);
	}

	p {
		font-size: var(--text-small);
		color: var(--ink-soft);
	}

	@container (min-width: 30rem) {
		.feature-card {
			flex-direction: row;
		}
	}
</style>
