import { useScreenHasMinWidth } from './useScreenHasMinWidth';

// https://www.figma.com/design/jgLdzvUYrsslfYAAPHcrzT/Shoptet-%E2%80%93-Design-System?node-id=11866-480
export type ScreenSize = 'small' | 'medium' | 'large';

/**
 * Hook that returns the current layout size.
 * @returns The current layout size.
 */
export function useScreenSize(): ScreenSize {
  const md = useScreenHasMinWidth('md') ? 'medium' : undefined;
  const lg = useScreenHasMinWidth('xl') ? 'large' : undefined;

  return lg || md || 'small';
}