import { computed, type ComputedRef } from 'vue';
import { useDisplay } from 'vuetify';

export type LayoutTier = 'phone' | 'tablet' | 'desktop';

/**
 * Единый источник «яруса» экрана для адаптива портала.
 * phone  < 600px (нижнее меню-вкладки)
 * tablet 600..1279px (узкая колонка-иконки / rail)
 * desktop >= 1280px (полный сайдбар 232px, как сейчас)
 */
export function useLayoutTier(): {
    tier: ComputedRef<LayoutTier>;
    isPhone: ComputedRef<boolean>;
    isTablet: ComputedRef<boolean>;
    isDesktop: ComputedRef<boolean>;
} {
    const display = useDisplay();
    const tier = computed<LayoutTier>(() => {
        const w = display.width.value;
        if (w < 600) return 'phone';
        if (w < 1280) return 'tablet';
        return 'desktop';
    });
    return {
        tier,
        isPhone: computed(() => tier.value === 'phone'),
        isTablet: computed(() => tier.value === 'tablet'),
        isDesktop: computed(() => tier.value === 'desktop'),
    };
}