import { selectorFamily } from 'recoil';
import breakpointWidth from '../atoms/breakpointWidth';
import breakpointHeight from '../atoms/breakpointHeight';

/**
 * Read-only selector family for selecting a breakpoint's width and height at
 * the same time as a two-element array.
 */
const breakpointDimensions = selectorFamily({
  key: 'breakpoint.selectors.breakpointDimensions',
  get: key => ({
    get
  }) => {
    const width = get(breakpointWidth(key));
    const height = get(breakpointHeight(key));
    return [width, height];
  }
});
export default breakpointDimensions;