Dwinzo_dev/app/src/components/ui/inputs/InputToggle.tsx

import React from "react";

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

// Update InputToggle.tsx to be fully controlled
const InputToggle: React.FC<InputToggleProps> = ({
  label,
  onClick,
  value = false,
  inputKey,
}) => {
  // Remove internal state and use the value prop directly
  function handleOnClick() {
    if (onClick) onClick();
  }

  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: value ? "50%" : "2px",
            background: value ? "" : "var(--text-disabled)",
          }}
        ></div>
        <input
          type="checkbox"
          name=""
          id={`toogle-input-${inputKey}`}
          checked={value}
          readOnly
        />
      </div>
    </div>
  );
};

export default InputToggle;