<script lang="ts">
    import type { Table } from "$lib";
    import { formatTime } from "$lib";

    interface Props {
        hours: Table<"study_space_hours">[];
    }

    // Destructure hours with a safe default to avoid undefined
    const { hours }: Props = $props();

    // Determine today's index (0 = Sunday, 6 = Saturday)
    const todayIndex = new Date().getDay();

    // Find the hours entry matching today
    const todayHours = hours.find((h) => h.day_of_week === todayIndex);

    // Compute the display string for opening times
    let openingDisplay = $state("");
    if (todayHours) {
        openingDisplay = todayHours.open_today_status
            ? "Open 24/7"
            : `${formatTime(todayHours.opens_at)} - ${formatTime(todayHours.closes_at)}`;
    } else {
        openingDisplay = "Closed";
    }
</script>

<div class="opening-times">
    <strong>Today's Opening Times:</strong>
    {openingDisplay}
</div>

<style>
    .opening-times {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: #eaffeb;
    }
</style>
