import { CSSProperties } from 'react';
import { ScreenSize, useScreenSizeContext } from './useScreenSize';

/**
 * Returns responsive modal box styles. On mobile the modal expands to fill the
 * full viewport (no border radius, no max-width cap) so it doesn't float as a
 * small centered card on a phone screen.
 */
export function useModalStyle(desktopMaxWidth: number): CSSProperties {
  const screenSize = useScreenSizeContext();
  const isMobile = screenSize === ScreenSize.Mobile;

  if (isMobile) {
    return {
      width: '100%',
      height: '100%',
      maxWidth: '100%',
      maxHeight: '100%',
      borderRadius: 0,
      overflow: 'hidden auto',
    };
  }

  return {
    width: '100%',
    maxWidth: desktopMaxWidth,
    overflow: 'hidden',
  };
}