<script lang="ts">
	import StringCard from "../StringCard.svelte";
	import EmptyState from "../EmptyState.svelte";
	import type { StringCardData } from "../types";

	let { strings }: { strings: StringCardData[] } = $props();
</script>

<section>
	<h2 class="px-2 pb-4 text-base font-medium">Strings</h2>
	{#if strings.length === 0}
		<EmptyState message="No strings yet." />
	{:else}
		<div class="flex flex-col gap-4">
			{#each strings as entry (entry.rkey)}
				<StringCard {entry} />
			{/each}
		</div>
	{/if}
</section>
