import type { ReactNode } from 'react'

import styled from 'styled-components/macro'

import { useOutsideClickEffect } from './hooks'

type Props = {
  /** элемент, которому необходим функционал `OutsideClick` */
  children: ReactNode,
  /** функция-коллбек, отрабатывающая по клику вне области элемента */
  onClick: (event?: MouseEvent) => void,
}

export const OutsideClickWrapper = styled.div``

export const OutsideClick = ({
  children,
  onClick,
}: Props) => {
  const wrapperRef = useOutsideClickEffect({ onClick })
  return (
    <OutsideClickWrapper ref={wrapperRef}>
      {children}
    </OutsideClickWrapper>
  )
}