import type { ReactNode } from 'react'
import { Fragment } from 'react'

import type { Devices } from 'config'

import { getQuery } from './helpers'
import { useMediaQuery } from './hooks'

export * from './hooks'

type Props = {
  children: ReactNode,

  /** работает так же, как медиа запрос (max-width: width) */
  maxDevice?: Devices,

  /** работает так же, как медиа запрос (min-width: width) */
  minDevice?: Devices,
}

export const MediaQuery = ({
  children,
  maxDevice,
  minDevice,
}: Props) => {
  const query = getQuery(maxDevice, minDevice)
  const queryMatches = useMediaQuery(query)
  return (
    <Fragment>
      {
        queryMatches
          ? children
          : null
      }
    </Fragment>
  )
}