<script setup>
import { state } from '../store.js';
import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '../config.js';

function dismissAnnouncement() {
    if (lastSeenAnnouncementId.value != CURRENT_ANNOUNCEMENT_ID) {
        lastSeenAnnouncementId.value = CURRENT_ANNOUNCEMENT_ID;
    }
    state.announcementVisible = false;
}
</script>
<template>
    <!-- announcement -->
    <div v-if="state.announcementVisible" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
        <!-- info -->
        <div class="my-auto leading-tight">
            <div class="font-bold">Service Announcement</div>
            <div class="text-sm">
                <span>Changes were made to mqtt.meshtastic.org. Uplink your nodes to <button @click="state.infoModalVisible = true" type="button" class="link">our MQTT server</button> to continue showing on this map.</span>
            </div>
        </div>
        <!-- action buttons -->
        <div class="flex my-auto ml-auto mr-0 sm:mr-2">
            <a @click="dismissAnnouncement" href="javascript:void(0)" class="rounded-full">
                <div class="bg-white hover:bg-gray-100 p-2 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                    </svg>
                </div>
            </a>
        </div>
    </div>
</template>