import clsx from "clsx";

import { useDebug } from "@/hooks";

import { Axis } from "./axis";
import { Controls } from "./controls";
import { Message } from "./message";
import { Stats } from "./stats";
import { Typography } from "./typography";

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

interface DebugProps {
  children?: React.ReactNode;
}

const Debug = ({ children }: DebugProps) => {
  const isDebug = useDebug();

  if (isDebug)
    return (
      <div
        className={clsx(styles.debug, {
          [styles.hidden]: !isDebug,
        })}
      >
        {children}
        <Stats />
        <Axis />
        <Controls hidden={!isDebug} />
      </div>
    );
};

Debug.Axis = Axis;
Debug.Message = Message;
Debug.Typography = Typography;

export default Debug;