---
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>