import { CheckedIcon, IntermediateIcon } from "@/shared/icons";

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

interface Props {
	state: CheckBoxState;
	onClick: () => void;
}

export type CheckBoxState = "checked" | "unchecked" | "indeterminate";

export function CheckBox(props: Props) {
	function getClassName() {
		switch (props.state) {
			case "checked":
				return styles.checked;
			case "unchecked":
				return styles.unchecked;
			case "indeterminate":
				return styles.indeterminate;
		}
	}

	return (
		<div
			className={`${styles.box} ${getClassName()}`}
			onClick={() => props.onClick()}
		>
			{props.state === "indeterminate" && <IntermediateIcon />}
			{props.state === "checked" && <CheckedIcon />}
		</div>
	);
}
