import type { Theme } from '@mui/material';
import { useMediaQuery } from '@mui/material';
import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';

const defaultExpandableWidth = 852;

export const useWideVariant = () => {
  const { variant, useRecommendedRoute } = useWidgetConfig();
  const expandableAllowed = useMediaQuery((theme: Theme) =>
    theme.breakpoints.up(defaultExpandableWidth),
  );
  return variant === 'wide' && expandableAllowed && !useRecommendedRoute;
};