import { useState, useEffect } from 'react';
import './TOD.ToggleText.css';

const TODToggleText = ({ options, value, onChange }) => {
  const [selectedOption, setSelectedOption] = useState(value || options[0].value);

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

  const handleClick = () => {
    const newValue = selectedOption === options[0].value ? options[1].value : options[0].value;
    setSelectedOption(newValue);
    onChange(newValue);
  };

  return (
    <div className="tod-toggle-text-wrapper">
      <div 
        className={`tod-toggle-text ${selectedOption === options[1].value ? 'checked' : ''}`}
        onClick={handleClick}
      >
        <div className="tod-toggle-text-track">
          <div className="tod-toggle-text-track-inner">
            <span className={`tod-toggle-text-option ${selectedOption === options[0].value ? 'active' : ''}`}>
              {options[0].label}
            </span>
            <span className={`tod-toggle-text-option ${selectedOption === options[1].value ? 'active' : ''}`}>
              {options[1].label}
            </span>
          </div>
        </div>
        <div className="tod-toggle-text-handle" />
      </div>
    </div>
  );
};

export default TODToggleText; 