import { forwardRef, ReactNode, Ref } from "react";
import clsx from "clsx";

import styles from "./BlurComponent.module.scss";

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

const BlurComponent = forwardRef(function BlurComponent(
  {
    children,
    isActiveBlur,
    className,
    gradientClassName = "",
  }: BlurComponentProps,
  ref: Ref<HTMLDivElement>
) {
  return (
    <div className={clsx(styles.gradientContainer, className)} ref={ref}>
      {children}
      {isActiveBlur && (
        <div className={clsx(styles.gradientBlur, gradientClassName)}>
          <div />
          <div />
          <div />
          <div />
          <div />
          <div />
        </div>
      )}
    </div>
  );
});

export default BlurComponent;
