import { writable } from 'svelte/store';
// Define Tailwind breakpoints
const breakpoints = {
    sm: '(min-width: 640px)',
    md: '(min-width: 768px)',
    lg: '(min-width: 1024px)',
    xl: '(min-width: 1280px)',
    '2xl': '(min-width: 1536px)',
};
// Initial screen size check
export const screenSize = writable(
// Maker sure the document is loaded.
Object.keys(breakpoints).reduce((acc, key) => {
    if (typeof document === 'undefined')
        return acc;
    acc[key] = matchMedia(breakpoints[key]).matches;
    return acc;
}, {}));
// Add event listeners for each breakpoint
for (const [size, mediaQuery] of Object.entries(breakpoints)) {
    if (typeof document === 'undefined')
        continue;
    const mediaQueryList = window.matchMedia(mediaQuery);
    mediaQueryList.addEventListener('change', e => {
        screenSize.update(sizes => ({ ...sizes, [size]: e.matches }));
    });
}
