<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import DateInputWithPrecision from '$lib/shared/primitives/DateInputWithPrecision.svelte';
import type { DatePrecision } from '$lib/shared/utils/documentDate';

// Only DAY / MONTH / YEAR are offered (same as the person life-date field and the
// 60+ author audience). Storage still accepts all seven precisions; SEASON/RANGE/
// APPROX render correctly elsewhere but make no sense to enter for a relationship.
let {
	name,
	legend,
	initialIso = '',
	initialPrecision = null
}: {
	name: string;
	legend: string;
	initialIso?: string | null;
	initialPrecision?: string | null;
} = $props();

const precisions: { value: DatePrecision; label: string }[] = $derived([
	{ value: 'DAY', label: m.relation_precision_day() },
	{ value: 'MONTH', label: m.relation_precision_month() },
	{ value: 'YEAR', label: m.relation_precision_year() }
]);
</script>

<DateInputWithPrecision
	name={name}
	legend={legend}
	precisionLabel={m.relation_label_date_precision()}
	precisions={precisions}
	hint={m.relation_date_placeholder_hint()}
	initialIso={initialIso}
	initialPrecision={initialPrecision}
	inputClass="bg-surface"
	selectClass="bg-surface text-ink-3"
/>
