import React, {MouseEvent, forwardRef, MouseEventHandler} from 'react';
import cls from 'classnames';
import cn from './backdrop.module.styl';

interface BackdropProps {
    background?: string;
    opacity?: number;
    type?: 'cover' | 'global';
    className?: string;
    onClick?: MouseEventHandler;
}

export const Backdrop = forwardRef<HTMLDivElement, BackdropProps>((props, ref) => {
    const {
        onClick = () => {},
        type = 'cover',
        background,
        opacity,
        className
    } = props;

    function clickHandler(evt: MouseEvent<HTMLDivElement>) {
        onClick(evt);
    }

    return (
        <div
            ref={ref}
            className={cls(
                cn.backdrop,
                className,
                {
                    [cn.cover]: type === 'cover',
                    [cn.global]: type === 'global'
                })}
            style={{background, opacity}}
            onClick={clickHandler}
        />
    );
});