import React from "react";
import style from "./FreezeLayer.module.css";
import getCompliedClassName from "../../utils/getCompliedClassName";
import Box from "../layout/Box";
import FreezeLayerPropTypes from "./FreezeLayer.propTypes";
import { defaultProps } from "./FreezeLayer.propTypes";

export default function FreezeLayer(props) {
  let {
    children,

    variant,
    align,
    direction,
    blur,

    customClassName,
    customId,
    ariaLabel,

    tagAttributeProps
  } = props;

  let ariaLabelValue = ariaLabel || "FreezeLayer";

  let className = getCompliedClassName(
    customClassName,
    {
      [style.base]: true,
      [style[variant]]: !!variant,
      [style[blur]]: !!blur,
      [style[direction]]: !!direction
    },
    {
      [customClassName.base]: !!customClassName.base,
      [customClassName[variant]]: !!customClassName.variant,
      [customClassName[blur]]: !!customClassName.blur,
      [customClassName[direction]]: !!customClassName.direction
    }
  );

  return (
    <Box
      customClassName={{ cover: className }}
      aria-label={ariaLabelValue}
      data-id={customId}
      align={align}
      direction={direction}
      isContainer
      {...tagAttributeProps}
    >
      {children && children}
    </Box>
  );
}

FreezeLayer.propTypes = FreezeLayerPropTypes;
FreezeLayer.defaultProps = defaultProps;
