import { useBreakpoints } from '@vueuse/core';
import type { CssBreakpointName } from '../../config/css-breakpoints';

function breakpoints(breakpoints: Record<CssBreakpointName, number>) {
  return useBreakpoints(
    {
      xs: breakpoints.xs,
      sm: breakpoints.sm,
      md: breakpoints.md,
      lg: breakpoints.lg,
      xl: breakpoints.xl,
    }
  );
}

/**
* Возвращает реактивные флаги isMobile и isTablet на основе переданных breakpoints.
* @param projectBreakpoints - набор брейкпоинтов проекта (xs, sm, md, lg, xl) в пикселях
*/
export const checkDeviceWidth = (projectBreakpoints: Record<CssBreakpointName, number>) => {
  const isMobile = breakpoints(projectBreakpoints).smaller('sm');
  const isTablet = breakpoints(projectBreakpoints).smaller('md');

  return ({
    isMobile,
    isTablet
  });
};