import React from 'react';
import cx from 'classnames';
import styles from './index.less';

interface Props {
  children: React.ReactNode;
  env: string;
}

export default ({ children, env }: Props) => {
  const isDevelopment = process.env.NODE_ENV === 'development';

  const watermark =
    env === 'prod' ? null : (
      <div
        className={cx(styles.watermark, {
          [styles.dev]: !isDevelopment && env === 'dev',
          [styles.qa]: env === 'qa',
          [styles.uat]: env === 'uat',
        })}
      />
    );

  return (
    <>
      {children}
      {watermark}
    </>
  );
};