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} 
        style={{
          background: value ? "var(--background-color-accent)" : "",
          outline: value ? "" : "1px solid var(--border-color)",
        }}
      >
        <div
          className="check-box-style"
          style={{
            left: value ? "16px" : "2px",
            background: value ? "" : "var(--text-disabled)",
          }}
        ></div>
        <input
          type="checkbox"
          name=""
          id={`toogle-input-${inputKey}`}
          checked={value}
          readOnly
        />
      </div>
    </div>
  );
};

export default InputToggle;