import type { HTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";

export type VisibilityProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    maintainSize?: boolean;
    visible?: boolean;
  }
>;

export function Visibility({
  children,
  className,
  maintainSize = false,
  style,
  visible = true,
  ...props
}: VisibilityProps) {
  return (
    <div
      aria-hidden={!visible || undefined}
      className={cn(!visible && !maintainSize ? "hidden" : "", className)}
      style={{ ...(!visible && maintainSize ? { visibility: "hidden" } : {}), ...style }}
      {...props}
    >
      {children}
    </div>
  );
}