import React, { useEffect, useState } from "react";

interface InputToggleProps {
  label: string; // Represents the toggle state (on/off)
  onClick?: () => void; // Function to handle toggle clicks
  value?: boolean;
  inputKey: string;
}

const InputToggle: React.FC<InputToggleProps> = ({
  label,
  onClick,
  value = false,
  inputKey,
}) => {
  const [activeValue, setActiveValue] = useState<boolean>(value);

  function handleOnClick() {
    setActiveValue(!activeValue);
    if (onClick) onClick();
  }

  useEffect(() => {
    setActiveValue(value);
  }, [value]);

  return (
    <div className="input-toggle-container">
      <label htmlFor={`toogle-input-${inputKey}`} className="label">
        {label}
      </label>
      <div className={"check-box"} onClick={handleOnClick}>
        <div
          className="check-box-style"
          style={{
            left: activeValue ? "50%" : "2px",
            background: activeValue ? "" : "var(--text-disabled)",
          }}
        ></div>
        <input
          type="checkbox"
          name=""
          id={`toogle-input-${inputKey}`}
          defaultChecked={value}
        />
      </div>
    </div>
  );
};

export default InputToggle;