import { useMediaQuery } from '@vueuse/core';
import { defineStore } from 'pinia';
import { computed } from 'vue';

export const useMediaStore = defineStore('media', () => {
  const smLess = useMediaQuery('(width < 576px)');
  const smOnly = computed(() => !smLess.value && mdLess.value);
  const mdLess = useMediaQuery('(width < 768px)');
  const mdOnly = computed(() => !mdLess.value && lgLess.value);
  const lgLess = useMediaQuery('(width < 1024px)');
  const lgOnly = computed(() => !lgLess.value && xlLess.value);
  const xlLess = useMediaQuery('(width < 1280px)');
  const xl = computed(() => !xlLess.value);
  return {
    smLess,
    smOnly,
    mdLess,
    mdOnly,
    lgLess,
    lgOnly,
    xlLess,
    xl,
  };
});
