<script lang="ts">
	import { t } from '$lib/i18n/index.svelte.ts';

	let {
		text = $bindable(),
		extra = $bindable(),
		clusterIds,
	}: {
		text: string;
		extra: string;
		clusterIds: string[];
	} = $props();
</script>

<label class="field">
	<span class="field-label">{t('card_new.cloze_text_label')}</span>
	<textarea
		bind:value={text}
		required
		rows="6"
		placeholder={t('card_new.cloze_text_placeholder')}
		class="input mono"
	></textarea>
	<span class="field-hint">{t('card_new.cloze_help')}</span>
	{#if text.trim() && clusterIds.length === 0}
		<span class="field-error">{t('card_new.cloze_no_clusters')}</span>
	{:else if clusterIds.length > 0}
		<span class="field-hint">
			{t('card_new.cloze_clusters_detected', { n: clusterIds.length, ids: clusterIds.join(', c') })}
		</span>
	{/if}
</label>
<label class="field">
	<span class="field-label">{t('card_new.cloze_extra_label')}</span>
	<textarea
		bind:value={extra}
		rows="3"
		placeholder={t('card_new.cloze_extra_placeholder')}
		class="input mono"
	></textarea>
</label>

<style>
	.field {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.field-label {
		font-size: 0.8125rem;
		font-weight: 600;
		color: hsl(var(--color-foreground));
		letter-spacing: 0.01em;
	}

	.field-hint {
		font-size: 0.75rem;
		color: hsl(var(--color-muted-foreground));
		line-height: 1.4;
	}

	.field-error {
		font-size: 0.75rem;
		color: hsl(var(--color-error));
	}

	.input {
		display: block;
		width: 100%;
		border: 1px solid hsl(var(--color-border));
		border-radius: 0.5rem;
		background: hsl(var(--color-surface));
		color: hsl(var(--color-foreground));
		padding: 0.5rem 0.625rem;
		font-size: 0.875rem;
		line-height: 1.5;
		transition: border-color 0.12s, box-shadow 0.12s;
		resize: vertical;
	}
	.input:focus {
		outline: none;
		border-color: hsl(var(--color-primary) / 0.6);
		box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.1);
	}
	.input.mono { font-family: ui-monospace, 'Cascadia Code', monospace; }
</style>
