import React, { ReactNode } from 'react';
import classnames from 'classnames';

interface Props {
  children: ReactNode,
  active: boolean,
  fullWidth?: boolean,
  topMargin?: boolean,
  position: string | string[],
}

export const PopUp = ({ children, active, fullWidth, topMargin, position }:Props) => {
  const getPositionClass = (elem) => `u-position--${elem}`;
  const getPositions = (position) => {
    if (Array.isArray(position)) {
      return position.map((elem) => getPositionClass(elem));
    }
    return position ? getPositionClass(position) : null;
  };
  const className = classnames(
    'c-pop-up',
    getPositions(position),
    {
      'c-pop-up--active': active,
      'u-full-width': fullWidth,
      'u-margin-top--small': topMargin,
    },
  );

  return (
    <div className={className}>{children}</div>
  );
};