---
import { Icon } from "astro-icon/components";

import { announcementConfig } from "@/config";
import { i18n } from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import WidgetLayout from "./widgetLayout.astro";


const config = announcementConfig;

interface Props {
    class?: string;
    style?: string;
}
const className = Astro.props.class;
const style = Astro.props.style;
---

<WidgetLayout
    name={config.title || i18n(I18nKey.announcement)}
    id="announcement"
    class={className}
    style={style}
>
    <div>
        <!-- 公告栏内容 -->
        <div class="text-neutral-600 dark:text-neutral-300 leading-relaxed mb-3">
            {config.content}
        </div>
        <!-- 可选链接和关闭按钮 -->
        <div class="flex items-center justify-between gap-3">
            <div>
                {config.link && config.link.enable !== false && (
                    <a
                        href={config.link.url}
                        target={config.link.external ? "_blank" : "_self"}
                        rel={config.link.external ? "noopener noreferrer" : undefined}
                        class="btn-regular rounded-lg px-3 py-1.5 text-sm font-medium active:scale-95 transition-transform"
                    >
                        {config.link.text}

                    </a>
                )}
            </div>
            {config.closable && (
                <button
                    class="btn-regular rounded-lg h-8 w-8 text-sm hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors"
                    onclick="closeAnnouncement()"
                    aria-label={i18n(I18nKey.announcementClose)}
                >
                    <Icon name="fa6-solid:xmark" class="text-sm" />
                </button>
            )}
        </div>
    </div>
</WidgetLayout>

<script>
    function closeAnnouncement() {
        // Find all announcement widgets
        const widgetLayouts = document.querySelectorAll('widget-layout[data-id^="announcement"]');
        widgetLayouts.forEach(layout => {
            (layout as HTMLElement).style.display = 'none';
        });
        localStorage.setItem('announcementClosed', 'true');
    }
    // Check if closed on page load
    document.addEventListener('DOMContentLoaded', function() {
        if (localStorage.getItem('announcementClosed') === 'true') {
            const widgetLayouts = document.querySelectorAll('widget-layout[data-id^="announcement"]');
            widgetLayouts.forEach(layout => {
                (layout as HTMLElement).style.display = 'none';
            });
        }
    });
    // Make function global
    window.closeAnnouncement = closeAnnouncement;
</script>