---
import Layout from './Layout.astro';

import directus from "../../lib/directus"
import { readSingleton } from "@directus/sdk";

const global = await directus.request(readSingleton("global"));

export interface Props {
  title: string;
  description?: string;
}

---

<Layout title={global.title} description={global.description}>
  <slot />
</Layout>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-toggle');

    if (themeToggle) {
      themeToggle.addEventListener('click', () => {
        document.documentElement.classList.add('theme-switching');

        const rippleElements = document.querySelectorAll('.theme-ripple');
        rippleElements.forEach(el => {
          el.classList.add('ripple-active');
          setTimeout(() => {
            el.classList.remove('ripple-active');
          }, 600);
        });

        const event = new CustomEvent('themeChange', {
          detail: {
            theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light'
          }
        });
        document.dispatchEvent(event);

        setTimeout(() => {
          document.documentElement.classList.remove('theme-switching');
        }, 600);
      });
    }

    const socialLinks = document.querySelectorAll('.social-link');
    socialLinks.forEach(link => {

      link.addEventListener('mouseenter', () => {
        link.classList.add('hover-active');
      });

      link.addEventListener('mouseleave', () => {
        link.classList.remove('hover-active');
      });
    });
  });
</script>