function ConditionalTimeout() {
  const [isActive, setIsActive] = useState(true);
  const [message, setMessage] = useState("");

  // Only run timeout when isActive is true
  useTimeout(
    () => {
      setMessage("Timeout executed!");
    },
    isActive ? 2000 : null
  );

  return (
    <div>
      <button onClick={() => setIsActive(!isActive)}>
        {isActive ? "Cancel" : "Start"} Timeout
      </button>
      <p>{message}</p>
    </div>
  );
}

function DynamicDelayTimer() {
  const [delay, setDelay] = useState(1000);
  const [count, setCount] = useState(0);

  useTimeout(() => {
    setCount((prev) => prev + 1);
  }, delay);

  // Reset timeout with new delay each time count changes
  useEffect(() => {
    // This will restart the timeout with the current delay
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <input
        type="range"
        min="500"
        max="5000"
        value={delay}
        onChange={(e) => setDelay(Number(e.target.value))}
      />
      <p>Delay: {delay}ms</p>
    </div>
  );
}

function AutoSaveForm() {
  const [formData, setFormData] = useState({ title: "", content: "" });
  const [lastSaved, setLastSaved] = useState<Date | null>(null);
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  const saveForm = useCallback(async () => {
    if (hasUnsavedChanges) {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500));
      setLastSaved(new Date());
      setHasUnsavedChanges(false);
    }
  }, [hasUnsavedChanges]);

  // Auto-save after 2 seconds of inactivity
  useTimeout(saveForm, hasUnsavedChanges ? 2000 : null);

  const updateForm = (updates: Partial<typeof formData>) => {
    setFormData((prev) => ({ ...prev, ...updates }));
    setHasUnsavedChanges(true);
  };

  return (
    <form>
      <input
        value={formData.title}
        onChange={(e) => updateForm({ title: e.target.value })}
        placeholder="Title"
      />
      <textarea
        value={formData.content}
        onChange={(e) => updateForm({ content: e.target.value })}
        placeholder="Content"
      />
      {hasUnsavedChanges && <p>Unsaved changes...</p>}
      {lastSaved && <p>Last saved: {lastSaved.toLocaleTimeString()}</p>}
    </form>
  );
}

function ToastNotification() {
  const [toasts, setToasts] = useState<Array<{ id: string; message: string }>>(
    []
  );

  const addToast = (message: string) => {
    const id = Math.random().toString(36);
    setToasts((prev) => [...prev, { id, message }]);
  };

  const removeToast = (id: string) => {
    setToasts((prev) => prev.filter((toast) => toast.id !== id));
  };

  return (
    <div>
      <button onClick={() => addToast("New notification!")}>Add Toast</button>

      <div className="toast-container">
        {toasts.map((toast) => (
          <Toast
            key={toast.id}
            message={toast.message}
            onRemove={() => removeToast(toast.id)}
          />
        ))}
      </div>
    </div>
  );
}

function Toast({
  message,
  onRemove,
}: {
  message: string;
  onRemove: () => void;
}) {
  // Auto-remove toast after 3 seconds
  useTimeout(onRemove, 3000);

  return (
    <div className="toast">
      {message}
      <button onClick={onRemove}>×</button>
    </div>
  );
}