import { ReactNode } from "react";

import styles from "./style.module.css";

export default function ComponentFade({
  target,
  children,
  timeout,
}: {
  target: boolean;
  children: ReactNode;
  timeout?: number;
}) {
  return (
    <div
      className={styles.fade}
      style={{
        ["--fade-transition-duration" as any]: `${timeout ?? 300}ms`,
        ["--fade-opacity" as any]: target ? 1 : 0,
        ["--fade-pointer-events" as any]: target ? "auto" : "none",
      }}
    >
      {children}
    </div>
  );
}