<script lang="ts">
    /**
     * Datums-Kachel für Kalender-Einträge.
     *
     * - Einzeltermin: Wochentag · großer Tag · Monat
     * - Mehrtägig:    Wochentag-Range · Tag-Range · Monat
     *                 (gleiche Höhe, Box wächst nur in der Breite)
     *
     * Bewusst feste rem-Schriftgrößen + `size-*` (mobil etwas kleiner als
     * Desktop). Keine fluid/calc-Skalierung → kein Overflow, identisch
     * berechenbar auf allen Geräten.
     */
    let {
        start,
        end = null,
        multiDay = false,
    }: { start: Date; end?: Date | null; multiDay?: boolean } = $props();

    const isRange = $derived(multiDay && !!end);

    const weekday = (d: Date) =>
        d.toLocaleDateString("de-DE", { weekday: "short" }).replace(/\.$/, "");
    const month = (d: Date) =>
        d.toLocaleDateString("de-DE", { month: "short" });

    // YYYY-MM-DD aus lokalen Feldern (kein UTC-Shift) für <time datetime>.
    const isoDate = (d: Date) =>
        `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;

    const fullDate = (d: Date) =>
        d.toLocaleDateString("de-DE", {
            weekday: "long",
            day: "numeric",
            month: "long",
            year: "numeric",
        });

    const ariaLabel = $derived(
        isRange && end
            ? `${fullDate(start)} bis ${fullDate(end)}`
            : fullDate(start),
    );
</script>

<time
    datetime={isoDate(start)}
    aria-label={ariaLabel}
    class="shrink-0 select-none aspect-square size-18 rounded-sm rounded-br-4xl bg-wald-200 text-wald-500 flex justify-center items-center shadow"
>
    <div class="text-center font-black leading-normal">
        <div class="text-[10px] uppercase tracking-wider">
            {#if isRange && end}{weekday(start)}–{weekday(end)}{:else}{weekday(
                    start,
                )}{/if}
        </div>
        <div class="text-[20px] leading-5">
            {#if isRange && end}{start.getDate()}–{end.getDate()}{:else}{start.getDate()}{/if}
        </div>
        <div class="text-[10px] uppercase tracking-wider">
            {month(start)}
        </div>
    </div>
</time>
