<script lang="ts">
    interface Props {
        /** Caption for the tour video (used by script.js for lightbox); from media data */
        tourCaption?: string;
    }
    let { tourCaption }: Props = $props();
</script>

<header class="site-header">
    <h1>64 Armandine St #3 Boston, Massachusetts</h1>
    <div class="buttons">
        <button
            id="show_video"
            class="emoji-button"
            aria-label="Show video tour"
            data-name="tour"
            data-type="video"
            data-caption={tourCaption}
        >
            🎥
        </button>
        <button
            id="theme-toggle"
            class="emoji-button"
            aria-label="Toggle light/dark theme"
        >
            🌓
        </button>
    </div>
</header>

<style>
    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: var(--bg);
        border-bottom: 1px solid #ccc;
    }

    .emoji-button {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--accent);
    }
</style>
