import clsx from "clsx";

import { useWindowSize } from "@/hooks";
import { useStore } from "@/store";

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

interface AxisProps {
  x?: boolean;
  y?: boolean;
}

export const Axis = ({ x = true, y = true }: AxisProps) => {
  const showAxis = useStore.use.showAxis();
  const { width, height } = useWindowSize();

  if (showAxis && (x || y))
    return (
      <div className={styles.debugAxis}>
        <div className={styles.message}>
          <span>
            w: {width} h: {height}
          </span>
        </div>
        {x && <div className={clsx(styles.axis, styles.x)} />}
        {y && <div className={clsx(styles.axis, styles.y)} />}
      </div>
    );
};