<script lang="ts">
/**
 * JournalEntry_Metadata.svelte
 * Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
 * Displays creation, update, and original datetime/timezone information.
 */
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc } from '$lib/stores/ae_stores';
import type { ae_JournalEntry } from '$lib/types/ae_types';

interface Props {
    entry: ae_JournalEntry;
}

let { entry }: Props = $props();
</script>

<section class="journal-metadata w-full space-y-4">
    <!-- System Timestamps -->
    <div
        class="text-surface-500 flex flex-col gap-2 text-xs sm:flex-row sm:items-center sm:justify-between">
        <div class="flex flex-col gap-1 sm:flex-row sm:flex-wrap sm:gap-4">
            <span title="Creation date">
                <span class="font-semibold">Created:</span>
                {ae_util.iso_datetime_formatter(
                    entry.created_on,
                    'datetime_12_long'
                )}
            </span>
            {#if entry.updated_on}
                <span title="Last update">
                    <span class="font-semibold">Updated:</span>
                    {ae_util.iso_datetime_formatter(
                        entry.updated_on,
                        'datetime_12_long'
                    )}
                </span>
            {/if}
        </div>

        {#if entry.journal_entry_type}
            <span class="badge preset-tonal-surface">
                Type: {entry.journal_entry_type}
            </span>
        {/if}
    </div>
</section>
