import "./styles.scss";
import { LegacyRef, ReactNode, forwardRef } from "react";
import cn from "classnames";

type BlurComponentProps = {
  children: ReactNode;
  isActiveBlur?: boolean;
  className?: string;
  gradientClassName?: string;
};

const BlurComponent = forwardRef(function BlurComponent(
  {
    children,
    isActiveBlur,
    className,
    gradientClassName = "",
  }: BlurComponentProps,
  ref: LegacyRef<HTMLDivElement>
) {
  return (
    <div className={cn("gradient-container", className)} ref={ref}>
      {children}
      {isActiveBlur && (
        <div className={cn("gradient-blur", gradientClassName)}>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      )}
    </div>
  );
});

export default BlurComponent;
